I want to avoid page break inside row of table in html, when I convert html to PDF by wkhtmltopdf. I use page-break-inside:avoid with table- its works, but I have so many rows, then not work. If set display of tr as block or some thing else then it change the formatting of table and insert double border. Or it is possible to insert the table header on each page, where the table was splitted.
Make sure all parent elements are display: block . Also consider overriding table , tr , td 's display styles with CSS grid for the print layout if you keep having issues with the table.
The page-break-inside property sets whether a page-break should be avoided inside a specified element. Tip: The properties: page-break-before, page-break-after and page-break-inside help to define how a document should behave when printed. Note: You cannot use this property on absolutely positioned elements.
Syntax: page-break-inside: auto; avoid: It avoids a page break inside the element.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With