表格行前的分页符答案

【问题标题】：Page break before table row表格行前的分页符
【发布时间】：2017-12-16 05:47:41
【问题描述】：

我有一个表格，我想在打印时在某些 TR 之前强制分页，所以我四处搜索并发现 Applying "page-break-before" to a table row (tr)，看起来很简单：将显示设置为 block 并像往常一样使用 page-break-before。但是，它似乎不起作用（至少在 Chrome 59、Windows 中不起作用）。例如：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
  tr.break-here {
    display: block;
    page-break-before: always;
  }
</style>
</head>
<body>
<table>
  <tr class="break-here"><td colspan="2">&nbsp;
  <tr><td colspan="2">section
  <tr><td>a<td>b
  <tr><td>a<td>b
  <tr><td>a<td>b
  <tr class="break-here"><td colspan="2">&nbsp;
  <tr><td colspan="2">section
  <tr><td>a<td>b
  <tr><td>a<td>b
  <tr><td>a<td>b
  <tr class="break-here"><td colspan="2">&nbsp;
  <tr><td colspan="2">section
  <tr><td>a<td>b
  <tr><td>a<td>b
  <tr><td>a<td>b
</table>
</body>
</html>

打印时，所有这三个部分都在同一页上，但应该是三个单独的页面。

那里有人建议使用伪元素，但我尝试了但无济于事。还有一个建议是确保 TR 的 TD 包含块级元素，因此我尝试在该示例中的相关单元格中放置空 div，也没有任何更改。

还有How to apply CSS page-break to print a table with lots of rows?，我试过了：

This answer：没有效果：
- tr.break-here { display:block; page-break-after:always; }
- tr.break-here { page-break-after:always; }

我在这里做错了什么？我该怎么做呢？我也有点困惑，因为链接问题的答案似乎很受欢迎，在 cmets 中没有发现任何问题。将表格拆分为三个表格不是一种选择，因为我需要列宽（自动适应复杂内容）在所有页面上都相同。

【问题讨论】：

这个帖子可能有你的答案：stackoverflow.com/questions/8712677/…
@CharlieHeflin 谢谢。实际上，我很早就发现了这一点并尝试了一些事情，但我现在更仔细地查看了它并仔细阅读了每个答案。我能够从那里想出一个似乎可行的奇怪东西，尽管我不明白。再次感谢。

标签： html css printing css-tables

【解决方案1】：

我根据this answer 和一些实验找到了一个解决方案，我不知道它为什么有效：

<tr>
    <td>
        <div></div>
        <div style="page-break-before:always"></div>

以下所有内容都很重要：

没有tr 上的分页符样式。
单元格必须至少包含两个 div。
除第一个以外的任何 div 都必须是 page-break-before:always。

如果单元格仅包含一个 div，则它不起作用。与那个答案不同，clear:both 似乎并不重要，第三个 div 也不重要。

我找不到不涉及将 div 添加到 tr 的有效解决方案（例如，使用伪元素）。

所以这就是我现在正在做的事情，尽管我不介意有人解释这里发生了什么，或者更重要的是，为什么原始链接问题中的解决方案（tr 上的display:block; page-break-before:always;）确实不适合我。

【讨论】：

这个解决方案非常棒，因为它不需要对您可能拥有的现有表格进行任何特殊的样式更改，并且可以通过编程方式插入几乎任何地方。此外，您可以将td 设置为零像素高度，这样它就不会影响表格的内容。希望我不必翻遍 10 个不同的 stackoverflow 页面来找到这个 :-)