Html Table Wrap Column

I have a table where users input data into columns. Each time the user enters data a new column is created. After a while they have a TON of columns and I need them to wrap. I know

Solution 1:

You shouldn't use tables for this. You should use divs with "float: left" CSS style.

Here is a working example: http://jsfiddle.net/3MEJ5/

Solution 2:

it is actually not simple. The table/row/column structure is quite rigid. To achieve what you describe, you have to create each cell as a single-celled table in a giant outer cell. Then they will wrap. But then, they may not align well.

Solution 3:

Instead of using table columns, try having each input data be a table on its own, wrapped inside a <div class="datainput">, using the following CSS:

.datainput {display: inline-block; vertical-align: top;}

Now, instead of adding a new column, duplicate the container. This will place it next to the existing ones, and wrap if/when needed.

Should it fail to wrap, apply this CSS to the element containing all these containers:

word-break: break-all;

Solution 4:

A good solution for this now is to use CSS3 Columns.

You can set the CSS properties on the container and the children will flow down and across.

You have the options:

div {
  /* Make columns with a min width of 100px, create multiple columns as space permits */column-width: 100px;
  column-count: 3; /* Divide the text in a <div> element into three columns */column-gap: 40px;  /* Specify a 40 pixels gap between the columns *//* Specify the width, style, and color of the rule between columns */column-rule: 4px double #ff00ff;
}

For more details see: https://www.w3schools.com/cssref/css3_pr_columns.asp

For browser support see: https://caniuse.com/#search=css3%20columns