Avoid page break inside table row

Question

I want to avoid page tearing inside a table row in html when I convert html to PDF by wkhtmltopdf. I use page breaks: avoid working with tables, but I have so many rows, it doesn't work. If you set the display of tr as a block or something else, change the formatting of the table and insert a double border. Or you can insert a table title on each page where the table has been split.

Answer 1

You can 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 do not apply directly to <tr> tags, because of what you indicated above, they have a unique display style that does not allow these CSS rules to be used. However, the <td> and <th> tags inside them usually do allow this specification - and you can easily apply these rules for ALL child- <tr> and <td> using CSS as shown above.

Answer 2

The best way I found a solution to this problem in webkit browsers is to place a div inside each td element and apply page break: avoid the style for the div, for example:

 ... <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> 

Despite the fact that Chrome, presumably, does not recognize "page break: avoid"; property, it seems that the contents of the string are not split in half when using wktohtml to create PDF files. The tr element may hang a bit on the page, but the div and nothing inside it will.

Answer 3

I used the 4px trick from @AaronHill above ( link ) and it worked very well! I used a simpler CSS rule without adding 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 ; } } 

Answer 4

Using CSS-break-inside will not work (this is a webkit browser issue).

There is a JavaScript table partition table wkhtmltopdf that automatically splits a long table into smaller tables depending on the page size you specify (rather than page break after the static value of x lines): https://gist.github.com/3683510

Answer 5

I wrote the following JavaScript based on Aaron Hill's answer:

 //Add a div to each table cell so these don't break across pages when printed //See http://stackoverflow.com/a/17982110/201648 $(document).ready(function () { var ctlTd = $('.dontSplit td'); if (ctlTd.length > 0) { //console.log('Found ctlTd'); ctlTd.wrapInner('<div class="avoidBreak" />'); } }); 

Where dontSplit is a table class where you don't want td to be paginated. Use this with the following CSS (again, attributed to Aaron Hill):

  .avoidBreak { 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 */ } 

This seems to work fine in the latest version of Chrome.

Answer 6

The only way I found work is to place each TR element inside it own TBODY element and apply the page break rules to the TBODY element via css

Answer 7

Try

 white-space: nowrap; 

style to td so that it does not break into new lines.