When printing a table, chrome and safari cut a row in half

Question

I do not have this problem with IE9, Firefox and Opera. Just Chrome and Safari.

When printing a page, if at some point there is a table that needs to be broken to continue on the next page, Safari and Chrome will cut the line in half and print the top half on the first page, and the bottom half on the second page.

Here is the code that I was trying to use that fixed the problem I encountered with IE9 - printing a small image of 50 pixels x 50 pixels in size on each line on the next page with text on the first page.

table { page-break-inside:auto } tr { page-break-inside:avoid; page-break-after:auto } 

I have 7 pages with a different number of lines on average about 10-15 lines. What can I do to fix this problem?

And I use PHP foreach to create a table from an array, so I won’t need to edit this code so that I can maintain it consistently between pages.

Answer 1

Here is an example table that allows page breaks between lines. It should work in any of the popular desktop browsers, including webkit-based ones ...

 <style> table { border-spacing: 0; line-height: 1.25em; } table > tbody > tr > td {padding: 0;} table > tbody > tr:first-child > td > div {border-top: 2px solid black;} table > tbody > tr > td:first-child > div {border-left: 2px solid black;} table > tbody > tr > td > div { page-break-inside: avoid; display: inline-block; vertical-align: top; height: 3.75em; border-bottom: 2px solid black; border-right: 2px solid black; } </style> <table> <tr> <td><div>Content</div></td> <td><div>Multi-<br/>line<br/>content</div></td> </tr> <tr> <td><div>Content</div></td> <td><div>Multi-<br/>line<br/>content</div></td> </tr> </table> 

Unfortunately, for a fixed height of the contents of the cell, a fixed height is required, which is likely to make it useless for most people who come across this message.

This can be turned off without setting a fixed height for the content, but it is surprisingly difficult. See my answer in this post to find out how this is done.

Answer 2

check these error reports webkit error report

Webkit newer Error report, referencing the above.