分页符不适用于表格

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