How to avoid page break inside table row for wkhtmltopdf
Update 17.09.2015: Check the version you are using: wkhtmltopdf 0.12.2.4 is said to fix the problem (I have not checked).
This is a known issue in wkhtmltopdf. The page breaking algorithm used by webkit (the WK in WKhtmltopdf) doesn't really work well for large tables. I suggest breaking the table down to smaller chunks that are more easily split to pages and using the css a lot:
table, tr, td, th, tbody, thead, tfoot {
page-break-inside: avoid !important;
}
Also have a look at the following wkhtmltopdf issues, they have interesting comments that discuss for example the table splitting problem. There is a JS solution that programmatically splits tables in 168 that might help you (I don't use it though).
- https://code.google.com/p/wkhtmltopdf/issues/detail?id=168
- https://code.google.com/p/wkhtmltopdf/issues/detail?id=9
Update 08.11.2013
There is much discussion about this in issue 168 linked above. Someone has managed to compile a version of wkhtmltopdf that supports better table breaking, but unfortunately it seems that it's not officially released and might contain other bugs. I don't know how to get it and I don't know how to compile on Windows, but anyone interested can check for example the comment here (see new update below).
Update 24.02.2014
You will be pleased to hear that in wkhtmltopdf 0.12 this feature among others has been greatly improved. However, wait for 0.12.1 and test thoroughly before starting to use any new version, it's still a little unstable although the new guys working on with antialize are doing a Great job (ashkulz rocks)! Keep updated at wkhtmltopdf.org and github. The google code site is obsolete and being slowly migrate.
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.
Page break for long table
CSS property: page-break-inside: avoid;
on HTML tr
element does it.
Tested with:wkhtmltopdf 0.12.3
provided for Linux (Ubuntu Trusty) 32-bit / 64-bit built on Ubuntu 14.04.2
as provided at:
http://wkhtmltopdf.org/downloads.html#stable
A quick and dirty test may look like:
<tr style="page-break-inside: avoid;">
<!-- A little border to see the result more easily -->
<td style="border: solid 1px blue;">
Large text possibly displayed on several pages ...
Large text possibly displayed on several pages ...
Large text possibly displayed on several pages ...
Large text possibly displayed on several pages ...
</td>
<td>col2</td>
<td>col3</td>
</tr>
Mozilla Developer Network page-break-inside description
Table row is getting cut while using wkhtmltopdf node module converting to pdf
Upgrading wkhtmltopdf to version 0.12.5 with qt patched resolved my issue.
Script to install wkhtmltopdf 0.12.5 with qt patched on ubuntu
If you face any issues related to zooming and extra whitespace try add these options in the
wkhtmltopdf npm package
--zoom value between 0.0 to 1.0
--disable-smart-shrinking
Issues related from github :
Regression on upgrade from 0.12.3 to 0.12.5
Related Topics
How to Add HTML Line Break Within an Input Text Placeholder
How Change Text and Color of Button Browse of Input File
How to Get an Iframe to Be Responsive in iOS Safari
Want to Make Font Awesome Icons Clickable
Image Inside Div Has Extra Space Below the Image
Css When Inline-Block Elements Line-Break, Parent Wrapper Does Not Fit New Width
Make Body Have 100% of the Browser Height
List of Html5 Elements That Can Be Nested Inside P Element
Why Does HTML Think "Chucknorris" Is a Color
How to Prevent Line-Break in a Column of a Table Cell (Not a Single Cell)
Maxlength Ignored for Input Type="Number" in Chrome
Alternative to Iframes With Html5
How to Center Text (Horizontally and Vertically) Inside a Div Block