小开

最佳答案

你可以试试 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>

大多数 CSS 规则并不直接适用于 <tr>标记，因为正如你上面指出的那样——它们有一个独特的 display样式，这不允许使用这些 CSS 规则。然而，它们中的 <td>和 <th>标签通常允许这种规范——你可以很容易地使用 CSS 将这些规则应用到所有的子 <tr>和 <td>中，如上所示。

小开

使用 CSS 页面分割内部不会工作(这是一个 webkit 浏览器问题)。

有一个 wkhtmltopdf JavaScript 表分解黑客技术，它根据指定的页面大小(而不是在 x 行的静态值之后进行分页)自动将一个长表分解成更小的表: https://gist.github.com/3683510

小开

我发现在 webkit 浏览器中处理这个问题的最好方法是在每个 td 元素中放入一个 div，并应用 page-break-inside:

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

小开

我根据 Aaron Hill 的回答编写了以下 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" />');
}
});

Where 不要分开 is the class of the table where you don't want the td's to split across pages. 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 */
}

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

小开

我发现唯一可行的方法是将每个 TR 元素放在它自己的 TBODY 元素中，并通过 css 将分页规则应用于 TBODY 元素

小开

我使用了上面@AaronHill (链接)的4px 技巧，效果非常好！我使用了一个更简单的 css 规则，不需要向表中的每个 <td>添加类。

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

小开

试试

white-space: nowrap;

为了避免在新的线条上断裂，把样式设置为 td。

小开

我找到了一种新的方法来解决这个问题，至少对我来说是这样的(Chrome Version 63.0.3239.84(正式版) MacOS Sierra 上的64位)

向父表中添加 CSS 规则:

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 停止表行内部的分页

赞美@Ibrennan208解决了这个问题！

小开

我发现，如果表的任何父元素是 display: inline-block或 flex，那么 page-break-inside: avoid将不起作用。确保所有父元素都是 display: block。

Also consider overriding table, tr, td's display styles with CSS grid for the print layout if you keep having issues with the table.

小开

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

Example

<table>
<tr>
<td>Forename</td>
<td>John</td>
</tr>
</table>
<table>
<tr>
<td>Surname</td>
<td>Piper</td>
</tr>
</table>
<table>
<tr>
<td>Website</td>
<td>desiringgod.org</td>
</tr>
</table>

小开

这是一个老问题，但我最近也犯了同样的错误。在我的例子中，问题与 Bootstrap 的 table-responsive类有关，它意外地被用于 <table>元素。

因此，如果遇到同样的问题，请在调用 wkhtmltopdf 时尝试从 <table>类中删除 table-responsive。

小开

为了避免错误的分页与表行，需要使用下面的 CSS，同时从 HTML 生成 PDF 文件。
table tr { page-break-inside: avoid! important;margin: 4px 0 4px 0;}

avoid page break inside row of table

2020年的解决方案

Example