Question

我有一张桌子，我希望在打印时在某些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; }

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

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添加div的工作解决方案（例如使用伪元素）。

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

表格行

1 个答案: