table 行前的分页符

Question

我有一个 table，我想在打印时在某些 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; }

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

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

似乎也不重要

我找不到不涉及向 tr 添加 divs（例如使用伪元素）的工作解决方案。

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

table 行前的分页符

Page break before table row

html

css

printing

css-tables