Print a thin HTML table on multiple columns

Question

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:

(The next page would start with row 93)

what server-side technology are you using to display the web page? That would help — Simon, Jun 23 '17 at 19:24
How is this a programming question? You can use the page button (bottom right) to increase the print content size. — Syfer, Jun 23 '17 at 19:24
I am using php echo to generate my table rows. Since the paper size is not defined, I can't decide when to move to the other column programmaticaly. — clementgamache, Jun 23 '17 at 19:41

score 1 · Answer 1 · answered Jan 22 '23 at 19:37

1

@media print {
    body {
        column-count: 2;
        -webkit-column-count: 2;
        -moz-column-count: 2;
    }
}

Prints the website content in a two column layout.

answered Jan 22 '23 at 19:37

mafu

31,798
42
154
247

score 0 · Answer 2 · answered Jun 23 '17 at 19:23

0

You can change the font size and the widths. You can also change the layout of the paper when printing, or if your printer is capable, use front and back sides of the paper.

answered Jun 23 '17 at 19:23

InvincibleM

519
2
12

score -3 · Accepted Answer · edited Aug 24 '17 at 15:33

-3

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

edited Aug 24 '17 at 15:33

TylerH

20,799
66
75
101

answered Jun 24 '17 at 21:33

clementgamache

100
10

1

Can you please elaborate how to use this solution? There's no element with a 'col' id in the original question. – Sam Sirry Dec 29 '19 at 05:48
Does not work. Please explain how to use it. – Brain Dec 10 '20 at 17:54

Print a thin HTML table on multiple columns

3 Answers3