时间戳

首页 > 解决方案 > 分页符不适用于表格

html - 分页符不适用于表格

问题描述

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

.page-break {
  page-break-after: always;
}
<tr class="page-break">
  <td>--</td>
</tr>

标签： htmlcss

解决方案

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

推荐阅读