分页符不适用于表格答案

【问题标题】：Page break not working with table分页符不适用于表格
【发布时间】：2018-08-22 11:36:41
【问题描述】：

我在打印时尝试了下面的代码在表格的特定行之后进行分页。它没有打破页面。打印时所有行都出现在同一页上。

.page-break {
  page-break-after: always;
}

<tr class="page-break">
  <td>--</td>
</tr>

【问题讨论】：

您能解释一下您的预期结果是什么吗？
我在表格中有 6 行。当我们打印该表格时，表格应分为两页（每页 -3 行）。为此，我为第 3 行添加了分页符类。
您应该扩展示例表，使其有几行，并在您的问题正文中添加所需的输出。
"我在表格中有 6 行" 在您的示例中，这 6 行在哪里？尽量使您的问题尽可能详细，包括您当前的代码、想要的结果等，这将导致用户更多的输入。

标签： html css

【解决方案1】：

不确定是否可以在 <tr>（不是块级元素）上使用它

“应用于根元素的正常流程中的块级元素。用户代理也可以将其应用于其他元素，例如表行元素。”

https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after

【讨论】：

【解决方案2】：

您缺少@media 打印。当您设置要打印的内容时，该媒体查询是特定的。

https://www.w3schools.com/cssref/pr_print_pageba.asp

回答更新：

经过一番搜索，@anderssonola 关于无法将其与<tr> 一起使用是正确的。因此，根据您设置页面的方式，您将有几个选项。我头顶上的那些如下：

选项 1 = 使用 <div> 将它们分开。

为此，您可以执行以下操作：

@media print {
    div.page-break {page-break-after: always;}
}

<table>
    <tr>
      <td>Page One</td>
    </tr>
</table>

<table>
  <div class="page-break">
    <tr>
      <td>Page Two</td>
    </tr>
  </div>
</table>

选项 2 = 使用 <table> 将它们分开。

@media print {
    .page-break {page-break-after: always;}
}

<table class="page-break">
    <tr>
      <td>Page One</td>
    </tr>
</table>

<table class="page-break">
    <tr>
      <td>Page Two</td>
    </tr>
</table>

选项 3 = 使用 HTML5 元素将它们分开。

@media print {
    section {page-break-after: always;}
}

<section>
Page One
</section>
<section>
Page Two
</section>

【讨论】：

我已经尝试过，但它也不起作用.. @media print { tr.page-break {page-break-after: always;} }