使用 CSS page-break-inside 属性的解决方案

如果我们需要在多页上打印包含多行的 HTML 表格,请查看下面的代码。

为此,我们需要 CSS page-break-inside 属性,它有助于指定文档在打印时的行为方式。

打印大表格时处理分页符的示例:

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      table {
        page-break-inside: auto;
      }
      tr {
        page-break-inside: avoid;
        page-break-after: auto;
      }
      thead {
        display: table-header-group;
      }
      tfoot {
        display: table-footer-group;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>heading</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td>notes</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>1</td>
        </tr>
        <tr>
          <td>2</td>
        </tr>
        <!-- 500 more rows -->
        <tr>
          <td>3</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

在我们的示例中,我们将 <table> 元素的 page-break-inside 属性设置为“auto”,并为 <tr> 元素使用“avoid”值。

此外,我们将 page-break-after 属性添加到 <tr>,然后使用 <thead> 和 <tfoot> 的“table-header-group”和“table-footer-group”值指定显示属性 元素,分别。

在打印大型 HTML 表格时如何处理分页符
日期:2020-06-02 22:15:09 来源:oir作者:oir