Question

我有<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）我真的不想要努力 - 编码列宽以确保它们完全相同。

Answer 1

尝试将其全部包装在一起使那个特定的块元素（http://learnlayout.com/inline-block.html）然后使用page-break - *

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

1 个答案: