从 Chrome 打印时仅在 tbody 之间分页答案

【问题标题】：Page break only between tbody when printing from Chrome从 Chrome 打印时仅在 tbody 之间分页
【发布时间】：2016-01-23 09:28:07
【问题描述】：

我有一个<table> 的数据，其中连续的行在概念上是相关的，需要保持在一起。我已将每对行分组到 <tbody> 标记中。当需要打印表格时，我想确保分页符只发生在 <tbody> 标记之间。

我尝试了 page-break-inside: avoid 和 page-break-after: auto 的一些变体，但似乎无法在 Chrome 42 中运行（见下面的屏幕截图）

不过，它似乎在 Firefox 40 和 IE 11 中按预期工作。看起来page-break-* 可能只适用于块级元素。在 html/css 中有没有很好的方法来完成这个？

示例代码：

<!doctype html>
<html>
<head>
    <style>
        table {
            width: 70%;
            border-collapse: collapse;
        }
        thead {
            display: table-header-group;
            text-align: left;
            border-bottom: 2px solid #000;
        }
        tbody {
            page-break-inside: avoid;
            border-bottom: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Project #</th>
                <th>Owner</th>
                <th>% Complete</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>HR-123</td>
                <td>Arther Dent</td>
                <td>42%</td>
            </tr>
            <tr>
                <td colspan='3'>Description: Find travel guide to get me back to earth.</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>RD-123</td>
                <td>Frodo Baggins</td>
                <td>9%</td>
            </tr>
            <tr>
                <td colspan='3'>Description: Find a better way to get the ring to Mordor.</td>
            </tr>
        </tbody>
        <!-- repeat tbody sections as necessary to get onto the second page -->
    </table>
</body>
</html>

这是一个JSFiddle，它会让你对我想要完成的工作有所了解。

编辑： 我考虑不使用表格，但因为 (i) 我希望我的列对齐，并且 (ii) 我真的不想硬编码列宽以确保它们都相同。

【问题讨论】：

我对表格还没有多少经验，但我建议您使用一些带有 display:inline-block 和 span 的 div，因为表格有点复杂......
提示：避免在表格、浮动元素和带边框的块元素中使用分页符。

标签： html css printing html-table page-break

【解决方案1】：

尝试将其全部包装在一个将其设为块元素 (http://learnlayout.com/inline-block.html) 然后使用 page-break-*

【讨论】：

您建议制作哪个元素inline-block？还是您建议完全放弃表格布局？我在<tbody> 上尝试过，但这导致我的列没有对齐（这是我的要求）。
<table> 和 <td> 之间的附加元素无效。您可以尝试在<td> 中添加块元素，并将page-break-inside: avoid 应用于这些元素。