htmlcsshtml-tablecss-multicolumn-layout

Print a thin HTML table on multiple columns

I have a simple 2-column table that has A LOT of rows:

<table>
<tr><td>row 1 column1</td><td>row 1 column2</td></tr>
<tr><td>row 2 column1</td><td>row 2 column2</td></tr>
[500 more rows]
<tr><td>row 4999 column1</td><td>row 4999 column2</td></tr>
<tr><td>row 5000 column1</td><td>row 5000 column2</td></tr>
</table>

The columns are very thin, which means I can fit about 4 columns per page. (two table widths)

Is it possible to continue the table in another column on the same page, like the following: enter image description here

(The next page would start with row 93)

Solution

  • Use CSS columns this way:

    .col {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}