【问题标题】：avoid page break inside row of table避免表格行内的分页符
【发布时间】：2012-03-06 12:34:58
【问题描述】：

当我通过 wkhtmltopdf 将 html 转换为 PDF 时，我想避免在 html 中的表格行内出现分页符。我使用 page-break-inside:avoid with table- 它的作品，但我有这么多行，然后不工作。如果将 tr 的显示设置为块或其他内容，则它会更改表格的格式 并插入双边框。或者可以在表格被拆分的每一页上插入表格标题。

【问题讨论】：

对不起，使用page-break-inside: avoid;时出现什么问题？
@ChristianVarga 当我使用 page-break-inside:avoid with tr 时，它不起作用
表格分页非常有问题。看看这个 JavaScript 解决方法code.google.com/p/wkhtmltopdf/issues/detail?id=168#c4
实际上我已经尝试page-break-inside:avoid 使用所有表格元素，如 tr td，但它不起作用。
Yay Google for WebGL，令人眼花缭乱的快速 javascript，可移植的本地客户端，但我们仍然无法打印数据表。谁需要这样做？？？只有世界上几乎所有的企业。顺便说一句，我刚才试图在谷歌文档中打印一个电子表格，它总是让我的 chrome 崩溃。我认为谷歌文档是通过 pdf 打印的。 ://

标签： html css wkhtmltopdf

【解决方案1】：

你可以用 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> 标签通常做允许这种规范-您可以轻松地将此类规则应用于所有子-<tr> 和<td>使用 CSS 如上所示。

【讨论】：

不幸的是，这（还）不适用于基于 webkit 的浏览器。
是的 - 有一些奇怪的地方。请参阅@Peter 在此问题中的回答：stackoverflow.com/questions/7706504/… 了解更多信息。
它只在你占据整个桌子时才有效，而不仅仅是 tr/td：stackoverflow.com/a/13525758/729324
我在 IE8 中遇到了这个问题，可能还有其他问题，它会导致整个表格试图放在一页上并切断任何溢出。它似乎也忽略了这些表格的“适合比例”选项。
@AttilaFulop 还在吗？你的帖子已经 3 年了，我仍然无法让它工作。谢谢

【解决方案2】：

使用 CSS page-break-inside 不起作用（这是 webkit 浏览器问题）。

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

【讨论】：

如果我只想打印没有 wkhtmltopdf 的网页，这个 js hack 会起作用吗？
这是唯一对我有用的。也适用于 HTML-PDF 库。

【解决方案3】：

我发现在 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: Avoid;”属性，这似乎可以防止行内容在使用 wktohtml 生成 PDF 时被分页符分成两半。 tr 元素可能会稍微超出分页符，但 div 和其中的任何内容都不会。

【讨论】：

margin: 4px 0 4px 0; 帮了我大忙，我偶尔会失去记录。谢谢
这种方法的一个问题是，有时一行中只有几个单元格被分到下一页，尽管每个单元格本身不会被分断。
@WorldSEnder 是的。你找到解决方法了吗？
不起作用。没有任何效果。我尝试了互联网上的所有“解决方案”，但没有解决方案。我们只需要接受连表格都不能渲染的垃圾软件。

【解决方案4】：

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

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 中运行良好。

【讨论】：

我正在使用 wkhtmltopdf 将大型表格呈现为 PDF 格式，这是唯一产生可接受结果的解决方案。它可能会更好（Webkit 在分页后不会重复单元格边框），但至少内容在那里。谢谢！

【解决方案5】：

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

【讨论】：

在 Arch Linux 上的 Chromium 版本 40.0.2214.111（64 位）上，这对我来说比其他的效果更好。它很丑而且感觉很hacky - 但显然多个tbody 元素在table stackoverflow.com/questions/3076708/… 中有效
这对我不起作用（Chrome 56.0.2924.87（64 位），Mac OS 10.12.2）。

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

试试

white-space: nowrap;

为 td 设置样式以避免它在新行上中断。

【讨论】：

比其他解决方案简单得多。这是新事物吗？

【解决方案8】：

我找到了解决这个问题的新方法，至少对我来说是（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 to stop page break inside of table row

感谢 @Ibrennan208 解决问题！

【讨论】：

它解决了切割表行的问题，它打破了其他设计

【解决方案9】：

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

如果您仍然遇到表格问题，还可以考虑使用 CSS grid 覆盖 table、tr、td 的 display 样式以用于打印布局。

【讨论】：

在这个问题的帮助下，我修复了我的多个表格在奇怪的地方被分解，在 Chrome 中文本重叠：在打印时添加了display:block !important; 到body 和div，以及@ 987654333@到table。

【解决方案10】：

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

示例

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

【讨论】：

您能提供一个示例表格 HTML 吗？谢谢。
感谢@gilbert-v 的示例编辑。我会试试这个。
这是我最终使用的解决方案。我需要将代表数据实体的 2 到 4 行分组，因此分页符仅在这些行组之间，而不是在内部。我把每组放在单独的桌子上。这里唯一的问题是在所有表中获得一致的列宽。

【解决方案11】：

这是一个老问题，但我最近遇到了同样的错误。我的问题与 Bootstrap 的 table-responsive 类有关，该类不小心被用于 <table> 元素。

所以，如果您有同样的问题，请尝试在调用 wkhtmltopdf 时从 <table> 类中删除 table-responsive。

【讨论】：