When printing a table, chrome and safari are cutting a row in half

Question

I don't have this issue with IE9, Firefox, and Opera. Just Chrome and Safari.

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

Here is the code I was trying to use which did fix a problem I had with IE9 - printing a small 50px x 50px image in every row on the next page with the text on the first page.

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

I have 7 pages with varying amounts of rows averaging around 10-15 rows. What can I do to fix this problem?

And I use PHP foreach to create the table from an array, so I would rather not have to edit that code so I can keep it consistent between the pages.

Answer 1

Here's an example of a table that only allows page breaks between rows. It should work in any of the popular desktop browsers, including the 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, it requires a fixed height on the cell content, which will probably make it useless to most people who come across this post.

It is possible to pull this off without setting a fixed content height, but it's surprisingly complicated. Check out my answer in this post to see how it's done.