HTML table wrapping column

Question

HTML table wrapping column

I have a table where users enter 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 to wrap them.

I know how to wrap text inside columns, but I need to wrap the entire column below the first column and so on.

+1

javascript html-table wrap

Phallacy 05 june 12 at 17:23

source to share

4 answers

in fact it is not easy. The table / row / column structure is pretty rigid. To achieve what you described, you need to create each cell as a table with one cell in a giant outer cell. Then they turn around. But then they may not line up well.

+1

srini.venigalla 05 june 12 at 17:27

source to share

Instead of using table columns, try having each input information be a table in itself, wrapped inside <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 it if required.

If that fails, apply this CSS to the element containing all of these containers:

word-break: break-all;

+1

Niet the dark absol 05 june 12 at 17:29

source to share

A good solution for this right now is using CSS3 Columns.

You can set CSS properties for the container and the descendants will flow down and across.

You have 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;
}