How to avoid pagination within table rows

Question

I want to avoid pagination within table rows via wkhtmltopdf when converting HTML to PDF. I used page-break-inside:avoid with table and it worked, but not when there are many rows. If the display is set to block or other methods, the format of the table will be changed and double borders will be inserted. Or you can insert a table header on each page to display when the table is split.

Answer 1

The best way I've found to handle this in webkit browsers is to place a div inside each td element and apply the page-break-inside: avoid style to the div like this:

...
<td>
  <div class="avoid">
    单元格内容。
  </div>
</td>
...
<style type="text/css">
  .avoid {
    page-break-inside: avoid !important;
    margin: 4px 0 4px 0;  /* 为了避免页面断开太接近div内的文本 */
  }
</style>

Although Chrome reportedly does not recognize the 'page-break-inside: avoid;' attribute, this appears to prevent line content from being split in half by page breaks when generating PDFs using wktohtml. The tr element may break slightly beyond the page, but the div and anything inside it will not.

Answer 2

You can try to use CSS:

<table class="print-friendly">
 <!-- 这里是你的表格的其余部分 -->
</table>

<style>
    table.print-friendly tr td, table.print-friendly tr th {
        page-break-inside: avoid;
    }
</style>

Most CSS rules cannot be applied directly to <tr> tags because as you pointed out above - they have unique display styles that do not allow these CSS rules. However, the <td> and <th> tags usually allow for this specification - you can easily apply these rules to all children using the CSS in the example above ##<tr> and <td>.