避免表格行内分页的方法

Question

我想在将HTML转换为PDF时，通过wkhtmltopdf避免表格行内的分页。我使用了page-break-inside:avoid与table，它能够工作，但是当有很多行时就不起作用了。 如果将的display设置为block或其他方式，那么会改变表格的格式，并插入双重边框。 或者可以在每个页面上插入表格的表头，以便在表格被分割时显示。

Answer 1

我发现在webkit浏览器中处理这个问题的最佳方法是在每个td元素内放置一个div，并将page-break-inside: avoid样式应用于div，如下所示：

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

尽管Chrome据说不识别'page-break-inside: avoid;'属性，但使用wktohtml生成PDF时，这似乎可以防止行内容被页面断开分成两半。 tr元素可能会稍微超出页面断开，但div和其内部的任何内容都不会。

Answer 2

你可以尝试使用CSS来实现：

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

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

大多数CSS规则不能直接应用于<tr>标签，因为正如你上面指出的那样-它们具有独特的display样式，不允许这些CSS规则。然而，其中的<td>和<th>标签通常允许这种规范-你可以使用上面示例中的CSS轻松地将这些规则应用于所有子<tr>和<td>。