avoid page break inside row of table
You might try this with CSS:
<table class="print-friendly">
<!-- The rest of your table here -->
</table>
<style>
table.print-friendly tr td, table.print-friendly tr th {
page-break-inside: avoid;
}
</style>
Most CSS rules don't apply to <tr>
tags directly, because of exactly what you pointed out above - they have a unique display
style, which doesn't allow for these CSS rules. However, the <td>
and <th>
tags within them usually do allow this kind of specification - and you can easily apply such rules to ALL child-<tr>
's and <td>
's using CSS as shown above.
I used the 4px trick by @AaronHill above (link) and it worked really well!
I used though a simpler css rule without needing to add a class to each <td>
in the table.
@media print {
table tbody tr td:before,
table tbody tr td:after {
content: "";
height: 4px;
display: block;
}
}
The best way I have found to deal with this problem in webkit browsers is to put a div inside each td element and apply the page-break-inside: avoid style to the div, like this:
...
<td>
<div class="avoid">
Cell content.
</div>
</td>
...
<style type="text/css">
.avoid {
page-break-inside: avoid !important;
margin: 4px 0 4px 0; /* to keep the page break from cutting too close to the text in the div */
}
</style>
Even though Chrome supposedly does not recognize the 'page-break-inside: avoid;' property, this seems to keep the row content from being split in half by a page break when using wktohtml to generate PDFs. The tr element may hang over the page break a bit, but the div and anything inside it will not.