当我通过wkhtmltopdf将html转换为PDF时，我想避免在html中的表格行内进行分页。我使用page-break-inside：避免使用table-它的工作原理，但是我有太多的行，那么就行不通了。如果将tr的显示设置为块或其他内容，则它将更改表的格式并插入双边框。或者可以在拆分表的每个页面上插入表标题。

您可以使用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>

<tr>由于您在上面指出的完全正确，大多数CSS规则并不直接应用于标签-它们具有独特的display样式，不允许使用这些CSS规则。但是，它们中的<td>and <th>标记通常确实允许这种规范-并且您可以使用CSS 轻松地将此类规则应用于所有child <tr>和<td>。

我发现在Webkit浏览器中解决此问题的最佳方法是在每个td元素中放置一个div并将page-break-inside应用于：避免对div设置样式，如下所示：

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

尽管Chrome可能无法识别“ page-break-inside：避免；” 属性，当使用wktohtml生成PDF时，这似乎可以防止行内容被分页符分成两半。tr元素可能会挂在分页符上，但div及其内部的任何内容都不会。

我在上方（link）使用了@AaronHill的4px技巧，效果非常好！我使用了更简单的CSS规则，而无需向<td>表中的每个类添加类。

@media print {
    table tbody tr td:before,
    table tbody tr td:after {
        content : "" ;
        height : 4px ;
        display : block ;
    }
}

我已经找到了解决此问题的新方法，至少对我而言（MacOS Sierra上的Chrome版本63.0.3239.84（正式版本）（64位））

将CSS规则添加到父表：

table{
    border-collapse:collapse;
}

对于TD：

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

我实际上是在Stack Overflow上找到此解决方案的，但未在最初的Google搜索中显示： CSS来停止表行内的分页符

@ Ibrennan208为解决问题表示敬意！

使用CSS page-break-inside无效（这是webkit浏览器问题）。

有一个wkhtmltopdf JavaScript表拆分技巧，它会根据您指定的页面大小自动将长表拆分为较小的表（而不是将静态值x行后的页面拆分）：https : //gist.github.com/3683510

我根据亚伦·希尔的回答编写了以下JavaScript：

//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" />');
    }
});

其中dontSplit是表的类，您不希望td在页面之间拆分。将其与以下CSS一起使用（同样归因于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 */
  }

在最新版本的Chrome中，这似乎运行良好。

我发现起作用的唯一方法是将每个TR元素放置在自己的TBODY元素内，然后通过css将分页符规则应用于TBODY元素

试试看

white-space: nowrap; 

将样式设置为td，以避免其换行。

我发现，page-break-inside: avoid如果表的任何父元素为display: inline-block或，则将无法正常工作flex。确保所有父元素均为display: block。

也可以考虑重写table，tr，td的display用CSS样式grid的打印布局，如果你保持具有与该表的问题。

2020解决方案

在所有浏览器上，我唯一能始终如一地工作的就是将每一行放入自己的表元素中。这也适用于节点HTML-PDF。然后将所有内容设置为page-break-inside: avoid。

table,
tr,
td,
div {
    page-break-inside: avoid;
}

唯一的缺点是必须手动设置列的宽度，否则看起来很奇怪。以下两列对我来说很有效。

td:first-child { width: 30% }
td:last-child { width: 70% }