avoid page break inside row of table

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.

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.

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.

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 ;
    }
}

I've found a new way to solve this problem, at least for me (Chrome Version 63.0.3239.84 (Official Build) (64-bit) on MacOS Sierra)

Add a CSS rule to the parent table:

table{
    border-collapse:collapse;
}

and for the td:

tr td{
    page-break-inside: avoid;
    white-space: nowrap;
}

I actually found this solution on Stack Overflow, but it didn't show up in initial Google searches: CSS to stop page break inside of table row

Kudos to @Ibrennan208 for solving the problem!

Using CSS page-break-inside won't work (this is a webkit browser issue).

There is a wkhtmltopdf JavaScript table splitting hack which breaks a long table into smaller tables automatically depending on the page size you specify (rather than page breaking after a static value of x rows): https://gist.github.com/3683510