如何避免分页<thead>和<tbody>

Question

我正在尝试使用一些很长的表格制作可打印的文档。 有时页面在表头和数据之间结束，这使得阅读变得更加困难。

例子

我怎么能防止呢？

我尝试使用以下 CSS，但没有帮助。

@media print {
        h1, h2, h3, thead, thead>tr {
            page-break-after: avoid;
            page-break-inside: avoid;
        }

        tbody {
            page-break-before: avoid;
        }

        /* I would also like to not have page breaks within first five rows */
        tbody:nth-child(-n+5) {    
            page-break-before: avoid;
        }
}

表结构：

<table border="1" cellspacing="0" cellpadding="3">
    <thead>
    <tr>
        <th rowspan="2">Metric</th>
        <th colspan="3">Type 1</th>
        <th colspan="3">Type 2<th>
    </tr>
    <tr>
        <th>Initial</th>
        <th>Final</th>
        <th>Difference</th>
        <th>Initial</th>
        <th>Final</th>
        <th>Difference</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Dataset1</td>
        <td>*DATA*</td>
        ...
    </tr>
    </tbody>
</table>

Answer 1

将分页tbody应用于tbody上的块级伪元素，而不是直接将其应用于tbody 。 这是工作演示

您必须仔细定义页面上下文以及适当的边距和尺寸以适合您的用例。

 table, th, td { border: 1px solid gray; border-collapse: collapse; } th, td { padding: 8px; } tbody:first-of-type { background-color: #eee; } @page { size: A4; margin: 0; } @media print { html, body { width: 210mm; height: 297mm; } tbody::after { content: ''; display: block; page-break-after: always; page-break-inside: avoid; page-break-before: avoid; } } 

 <div> <a href="#" onClick="window.print();">Print</a> </div> <hr /> <table> <thead> <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> </tr> </thead> <tbody> <tr> <td>Row 1 Cell 1</td> <td>Row 1 Cell 2</td> <td>Row 1 Cell 3</td> </tr> <tr> <td>Row 2 Cell 1</td> <td>Row 2 Cell 2</td> <td>Row 2 Cell 3</td> </tr> </tbody> <tbody> <tr> <td>Row 3 Cell 1</td> <td>Row 3 Cell 2</td> <td>Row 3 Cell 3</td> </tr> <tr> <td>Row 4 Cell 1</td> <td>Row 4 Cell 2</td> <td>Row 4 Cell 3</td> </tr> </tbody> <tfoot> <tr> <th>Foot 1</th> <th>Foot 2</th> <th>Foot 3</th> </tr> </tfoot> </table> 

Answer 2

我找到了解决此问题的方法，基于此处建议的解决方案： 如何避免在标题后立即出现分页符

向您的表中添加一个包装器并向其添加一个 before 伪元素。 该元素实际上不会占用任何空间（由于底边距为负），但在计算分页符的位置时将使用其高度，如果表格太近，则会强制浏览器将表格推到下一页至底部。

200px 应替换为略大于标题高度 + 正文第一行高度的值。

 /* This is the solution */ .wrapper::before { content: ""; display: block; height: 200px; margin-bottom: -200px; page-break-inside: avoid; break-inside: avoid; } /* Table styles */ table { width: 100%; } thead { background: green; } thead tr { page-break-inside: avoid; break-inside: avoid; } tbody { background: yellow; } tbody tr { height: 80px; } td { height: 80px; }

 <div class="wrapper"> <table> <thead> <tr> <td>header</td> <td>header</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>1</td> <td>2</td> </tr> </tbody> </table> </div>