Html 避免在表格行内分页
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9288802/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
avoid page break inside row of table
提问by Ankit Mittal
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 tableand insert double border. Or it is possible to insert the table header on each page, where the table was splitted.
当我通过 wkhtmltopdf 将 html 转换为 PDF 时，我想避免在 html 中的表格行内分页。我使用 page-break-inside:avoid with table- 它的工作原理，但我有这么多行，然后不起作用。如果将tr 的显示设置为块或其他东西，那么它会更改表格的格式并插入双边框。或者可以在表格被拆分的每一页上插入表格标题。
采纳答案by Troy Alford
You might try this with CSS:
你可以用 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 displaystyle, which doesn't allow for these CSS rules. However, the <td>and <th>tags within them usually doallow this kind of specification - and you can easily apply such rules to ALL child-<tr>'s and <td>'s using CSS as shown above.
大多数 CSS 规则并不<tr>直接应用于标签，因为正是您在上面指出的 - 它们具有独特的display样式，不允许这些 CSS 规则。但是，它们中的<td>and<th>标签通常确实允许这种规范 - 并且您可以使用 CSS轻松地将此类规则应用于所有子项<tr>和 ，<td>如上所示。
回答by Aaron Hill
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:
我发现在 webkit 浏览器中处理这个问题的最好方法是在每个 td 元素中放置一个 div 并应用 page-break-inside: avoid style 到 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>
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.
即使 Chrome 据称无法识别 'page-break-inside: avoid;' 属性，这似乎可以防止行内容在使用 wktohtml 生成 PDF 时被分页符分成两半。tr 元素可能会稍微挂在分页符上，但 div 和其中的任何内容都不会。
回答by phidias
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.
我使用了上面@AaronHill 的 4px 技巧（链接），效果非常好！我使用了一个更简单的 css 规则，而无需为<td>表中的每个添加一个类。
@media print {
table tbody tr td:before,
table tbody tr td:after {
content : "" ;
height : 4px ;
display : block ;
}
}
回答by Richard Pursehouse
Using CSS page-break-inside won't work (this is a webkit browser issue).
使用 CSS page-break-inside 不起作用（这是一个 webkit 浏览器问题）。
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
有一个 wkhtmltopdf JavaScript table splitting hack，它根据您指定的页面大小自动将长表分解为较小的表（而不是在 x 行的静态值后分页）：https: //gist.github.com/3683510
回答by Aaron Newton
I wrote the following JavaScript based on Aaron Hill's answer:
我根据 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 dontSplitis 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):
其中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 */
}
This appears to be working nicely in the latest version of Chrome.
这似乎在最新版本的 Chrome 中运行良好。
回答by Jason Silver
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)
我找到了解决这个问题的新方法，至少对我来说（MacOS Sierra 上的 Chrome 版本 63.0.3239.84（官方版本）（64 位））
Add a CSS rule to the parent table:
向父表添加 CSS 规则：
table{
border-collapse:collapse;
}
and for the td:
对于 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
我实际上在 Stack Overflow 上找到了这个解决方案，但它没有出现在最初的 Google 搜索中： CSS to stop page break inside of table row
Kudos to @Ibrennan208 for solving the problem!
感谢@Ibrennan208 解决了这个问题！
回答by Troy Morehouse
The only way I found to work was to place each TR element inside it's own TBODY element, and apply the page break rules to the TBODY element via css
我发现工作的唯一方法是将每个 TR 元素放在它自己的 TBODY 元素中，并通过 css 将分页规则应用于 TBODY 元素
回答by vinayakshukre
Try with
试试
white-space: nowrap;
style to td to avoid it breaking on new lines.
td 的样式以避免它在新行上中断。
回答by gilbert-v
The 2020 solution
2020 年的解决方案
The only thing I could consistently get to work on all browsers is to put each row inside its own table element. This also works with node HTML-PDF. Then just set everything to page-break-inside: avoid.
我能在所有浏览器上始终如一地工作的唯一一件事就是将每一行放在它自己的表元素中。这也适用于节点 HTML-PDF。然后只需将所有内容设置为page-break-inside: avoid.
table,
tr,
td,
div {
page-break-inside: avoid;
}
The only disadvantage to this is that you must manually set the width of the columns, otherwise it looks rather strange. The following worked well for me with two columns.
这样做的唯一缺点是必须手动设置列的宽度，否则看起来很奇怪。以下两列对我来说效果很好。
td:first-child { width: 30% }
td:last-child { width: 70% }
回答by Stephen Saucier
I have found that page-break-inside: avoidwill not work if the any of the table's parent elements are display: inline-blockor flex. Make sure all parent elements are display: block.
我发现page-break-inside: avoid如果表的任何父元素是display: inline-blockor ，这将不起作用flex。确保所有父元素都是display: block.
Also consider overriding table, tr, td's displaystyles with CSS gridfor the print layout if you keep having issues with the table.
如果表格一直有问题，还可以考虑使用 CSS覆盖table, tr,td的display样式以grid用于打印布局。
