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

Another solution to this problem that does not depend on fixed column widths is to wrap each cell's content in a display:block element and set this to page-break-inside: avoid. If you don't want to alter the HTML in the first place, you can alter the DOM dynamically on load. As I'm lazy, I'm using jQuery in the following example:

  
  



  
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

The result will look a bit different:

You see the following issues:

• the row already starts at the previous page (which can be a seen as an indication for the table is still continuing)
• the content of columns B and C is vertically centred according to the total height of the row spanning both pages so it appears to be top aligned towards the highest cell in column A

But the solution does work with WebKit browsers and still renders as a normal table.