Question

我尝试在打印时在表格的特定行之后使用以下代码进行分页。它没有中断页面。打印时所有行都显示在同一页面上。

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

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

Answer 1

您缺少@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>

Answer 2

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

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

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

分页符不适用于表格

2 个答案: