用 CSS 打印长表，有没有办法修改断开的表格第二部分的标题/表格标题？答案

【问题标题】：Printing long tables with CSS, Is there a way to modify the caption/table header of the 2nd part of the table that broke off?用 CSS 打印长表，有没有办法修改断开的表格第二部分的标题/表格标题？
【发布时间】：2021-12-21 12:37:20
【问题描述】：

所以这是个问题，我正在构建这个报告引擎来工作。数据可能很长，有时包含很多表格和图表。有时表格可能很长，几乎可以出现在页面的任何位置。如果我们打印时表格很长，人们希望看到表格标题/标题在标题中或在下一页的表格标题中包含类似“表 A 中的续表”之类的内容。这可能吗？

<html>
<table>
    <caption>Initial Caption</caption>
    <thead>
        <th>header 1</th>
        <th>header 2 </th>
    </thead>
    <tbody>
        <tr>
            <td>column 1</td>
            <td>column 2</td>
        </tr>
        <tr>
            <td>cell 2</td>
            <td>cell 2</td>
        </tr>
    </tbody>
</table>

</html>

现在当我打印它时，如果它在第 1 行和第 2 行之间切断。当标题/标题重复时，我会在标题作为标题中的新行

我尝试用 CSS 做一些 media="print" 但似乎没有任何效果。

【问题讨论】：

这能回答你的问题吗？ How to deal with page breaks when printing a large HTML table 或 stackoverflow.com/questions/6844391/…

标签： html css

【解决方案1】：

打印包含大量行的表格时，可能会出现在页面结束时将数据保持在一起的问题。可用于此目的的最合乎逻辑的属性是 CSS 中的分页符。

语法：

name_of_the_element { name_of_the_property: value;}

例如：

table {page-break-before: always;}

当表格开始时以及在打印行而不是行之间需要新页面时获取新页面的程序。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        table {page-break-before: always; 
               font-size: 100px;}
        tr{page-break-inside: avoid; 
           page-break-after: auto;}
    </style>
</head>
<body>
    hello!!
    <table>
        <tr>
            <th>s.no.</th>
            <th>name</th>
        </tr>
        <tr>
            <td> 1 </td>
            <td> apple </td>
        </tr>
        <tr>
            <td> 2 </td>
            <td> mango </td>
        </tr>
        <tr>
            <td> 3 </td>
            <td> kiwi </td>
        </tr>
        <tr>
            <td> 4 </td>
            <td> banana </td>
        </tr>  
        <tr>
            <td> 5 </td>
            <td> strawberry </td>
        </tr> 
        <tr>
            <td> 6 </td>
            <td> guava </td>
        </tr> 
        <tr>
            <td> 7 </td>
            <td> watermelon </td>
        </tr>    
    </table>
</body>
</html>

【讨论】：