如何避免在<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>

- Drath Vedro

Answer 1

我找到了一个解决此问题的方法，基于此处建议的解决方案：如何避免标题后立即发生分页 在表格中添加一个包装器并向其添加before伪元素即可。该元素实际上不会占用任何空间（由于负margin-bottom），但它的高度将用于计算放置页面断点的位置，如果表格距底部太近，则强制浏览器将其推送到下一页。

200像素应替换为略高于头部高度+正文第一行高度的值。

/* 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>

- UnShame

---

谢谢！非常有帮助的答案和解释！ - Canh

由于某种原因，只有 ::after 对我起作用。 ::before 没有起作用。 谢谢，不错！ - undefined

Answer 2

在您的 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>

- Asif Sharif Shahid