打印大型 HTML 表格时如何处理分页符?

htmlweb developmentfront end technology更新于 2025/3/27 0:12:17

在 HTML 中，当我们需要打印包含多行的表格时，在页面结束时保持数据完整是一个问题。如果没有监控分页符，它们还会将一行拆分成两半，并以突兀的方式剪切表格。这会破坏整个格式并破坏布局。在本教程中，我们将探讨在出现分页符时打印包含多行的表格内容的方法。

page-break-inside 和 page-break-auto

CSS 的 page-break 属性 可用于在表格包含多行时处理分页符。该属性有助于定义页面上元素在打印时的显示方式。这使得文档的打印效果更像书籍。 Page-break 属性并非直接可用的属性，但它包含三个可根据需要使用的属性。

page-break-before 属性指定元素框前是否允许分页符(以及允许多少个分页符)。此属性的值并非决定分页符是否应跟随元素的唯一因素。此决定还受到前一个元素的 page-break-after 值以及任何祖先元素的 page-break-inside 值的影响。语法如下 –

page-break-before: auto|always|avoid|left|right;

其中，

自动: 默认。分页符自动发生。
始终: 始终在插入元素前包含分页符。
避免: 避免在元素前使用分页符(如果可能)。
左: 在元素前插入分页符，使下一页成为左页。
右: 在元素前插入分页符，确保下一页被格式化为右页。

page-break-after 属性指定元素框后是否允许(以及允许多少)分页符。此属性的值不是决定分页符是否应在元素后的唯一因素。

此决定还受后续元素的 page-break-before 值以及所有祖先元素的 page-break-inside 值的影响。语法如下

page-break-after: auto|always|avoid|left|right;

自动: 默认。分页符会自动发生。
始终: 始终在插入元素后包含分页符。
避免: 避免在元素后使用分页符(如果可能)。
左: 在元素后插入分页符，使下一页成为左页。
右: 在元素后插入分页符，确保下一页被格式化为右页。

page-break-inside 属性 指定是否允许在元素框内使用分页符。此属性的值不是决定分页符是否应在元素后的唯一因素。

此决定还会受到任何后代元素的 page-break-before 和 page-break-after 值的影响。语法如下 –

page-break-inside: auto|avoid;

其中，

Auto: 默认。分页符自动发生。
Avoid: 避免在元素内部使用分页符(如果可能)。

示例

在此示例中，我们将 <table> 元素的 page-break-inside 属性设置为"auto"，并为 <tr> 元素使用"avoid"值。我们还将为 <tr> 添加 page-break-after 属性，然后为 <thead> 元素指定 display 属性，分别为"table-header-group"和"table-footer-group"值。和 <tfoot> 元素。

<!DOCTYPE html>
<html>
  <head>
    <title>How to Handle Page Breaks when Printing a Large HTML Table?</title>
    <style>
      table {
        page-break-inside: auto;
        background-color:lightblue;
        border:2px solid black;
      }
      tr {
        page-break-inside: avoid;
        page-break-after: auto;
      }
      thead {
        display: table-header-group;
      }
      tfoot {
        display: table-footer-group;
      }
      td{
          border:2px solid navy;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>This is the table header</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td>This is the table footer</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>1</td>
        </tr>
        <tr>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
        </tr>
        <!--several more rows -->
      </tbody>
    </table>
  </body>
</html>

将 div 标签嵌入到 <tr> 和 <td> 表格元素中

基本上，我们不能拆分 <tr> 或 <td> ，因为它们不是块级元素。因此，我们将 <div> 嵌入到每个元素中，并对 div 应用分页规则。其次，我们在每个 <div> 的顶部添加一些内边距，以补偿任何样式失真。

示例

<style>
    @media print {
        th div, td div {
            margin-top:-10px;
            padding-top5px;
            page-break-inside:avoid;
        }
    }
</style>
<script>
    $(document).ready(function(){
        $("table tbody th, table tbody td").wrapInner("<div></div>");
    })
</script>