如何在打印大型HTML表格时处理分页问题

在HTML中，当我们需要打印一个有许多行的表格时，存在一个保持数据在页面结束时保持在一起的问题。当不监控分页时，它们也可以将一行分为两半，并以突然的方式切割表格。它可能会混乱整个格式和破坏布局。在本教程中，我们将探讨在分页发生时打印表格内容的方法。

分页样式和分页自动设置

CSS的分页属性可用于处理具有多行的表格时的分页。它是一种有助于定义页面上元素在打印时如何显示的属性。这使得文档的打印更像是一本书。分页不是一个直接可用的属性，但它包含三个可以根据需要使用的属性。

分页前属性指定在元素框之前是否允许分页，并且可以允许的分页数。此属性的值并不是确定是否应在元素之后跟随分页的唯一因素。此决定还受到上一个元素的分页后值和任何祖先元素的分页内部值的影响。以下是语法-

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;

在这个例子中，我们将把<table>元素的page-break-inside属性设置为”auto”，并对<tr>元素使用”avoid”值。我们还将在<tr>上添加page-break-after属性，并分别对<thead>和<tfoot>元素指定”display”属性为”table-header-group”和”table-footer-group”值。

<!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标签嵌入和表元素中

基本上，我们无法打破或| ，因为它们不是块级元素。因此，我们将

嵌入每个元素，并对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>