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

在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;

其中，

  • Auto: 默认值。分页符会自动出现。

  • Always: 始终在插入元素之前包含分页符。

  • Avoid: 避免在元素之前使用分页符（如果可能）。

  • Left: 在元素之前插入分页符，以使下一页成为左页。

  • Right: 在元素之前插入分页符，以确保下一页格式化为右页。

page-break-after 属性指定在元素框之后是否（以及多少）允许分页符。此属性的值不是确定是否应在元素后进行分页的唯一因素。

此决定还会受到后续元素的 page-break-before 值以及任何祖先元素的 page-break-inside 值的影响。以下是语法

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

  • 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”值。我们还将 page-break-after 属性添加到 <tr>，然后分别对 <thead> 和 <tfoot> 元素指定带有“table-header-group”和“table-footer-group”值的 display 属性。

<!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>

更新于： 2023 年 9 月 11 日

3K+ 次查看

开启你的职业生涯

通过完成课程获得认证

立即开始
广告