Printing html tables, preventing rows from spanning multiple pages

Question

I generate html programmatically in order to have it rendered nicely for printing.

I have to print tables that may span several pages. This poses some challenges suc

Answer 1

Adding

td, th {
  width: 10000px;
}

inside @media print { } did the trick to make the example code work.

Now the printed columns are properly aligned again, and each row stays on a single page, never spanning two pages.

Works in current versions of Webkit (Safari), FF and Chrome (all tested on macOS only).

Caveat:

Unfortunately, the above is not fool proof. It only works in this example because the cells in each row have the same width.

Once those widths are random, an over-reaching pixel width like 10000px is messing up the columns again.

The only solution I found around this is to provide actual widths that are to be used. Since this is for printing, and since I know that I want to print to a specific paper format (e.g. DIN A4 or US Letter), I can specify the column width precisely with certainty.

So, while this solution is not a good one for a web page view in a browser on-screen, where the total width can vary, it's a good solution for printing, as long as the target print size can be predicted.

Here is the complete html code, setting the column widths to 4cm, 2cm and 3cm:

  
A
B
C
  
more text
1
2
3
4
5
more text
more text
  
1 adasd
2
3
4
5
6
x
x
  
1
2
3
4
5
6
x
x
  
1
2
3
4
5
6
x
x
  
1asd
2
3
4
5
6
x
x
  
1
2
3
4
5
6
x
x
  
1
2
3
4
5
6
xsdsdfsf
x
  
1
2
3
4
5
6
x
x
  
1
2 asda asdas
3
4
5
6
xasdada
x
  
1
2
3
4 asdasd 
5
6
x
x