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.

Pittel

This has been covered pretty extensively: https://mcmap.net/q/176458/-cross-browser-support-of-page-break-inside-avoid is just one example. – Vidal

yeah, but there has been no solution for webkit browsers – Fortyfive

I wish there was an answer to this issue. – Gadson

Can you post more code? – Posey

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.

Pentastich

Answer 2

check out these Bug Reports Webkit Bug report

Webkit newer Bug report referencing to the one above.

Wilscam