Html 从Chrome打印时，仅在正文之间分页符_Html_Css_Printing_Html Table_Page Break

Html 从Chrome打印时，仅在正文之间分页符

html css printing

Html 从Chrome打印时，仅在正文之间分页符,html,css,printing,html-table,page-break,Html,Css,Printing,Html Table,Page Break,我有一个的数据，其中连续的行在概念上是相关的，需要保持在一起。我将每对行分组在一个标记中。当需要打印表格时，我想确保分页只发生在标记之间我尝试了一些内部分页符：avoid和之后分页符：auto的变体，但似乎无法在Chrome 42中使用（见下面的屏幕截图）然而，在Firefox40和IE11中，它似乎确实像预期的那样工作。看起来分页符-*可能只适用于块级元素。在html/css中有没有一个很好的方法来实现这一点示例代码： <!doctype html> <html>

我有一个

的数据，其中连续的行在概念上是相关的，需要保持在一起。我将每对行分组在一个

标记中。当需要打印表格时，我想确保分页只发生在

标记之间

我尝试了一些

内部分页符：avoid

和

之后分页符：auto

的变体，但似乎无法在Chrome 42中使用（见下面的屏幕截图）

然而，在Firefox40和IE11中，它似乎确实像预期的那样工作。看起来

分页符-*

可能只适用于块级元素。在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>


桌子{
宽度：70%；
边界塌陷：塌陷；
}
泰德{
显示：表头组；
文本对齐：左对齐；
边框底部：2倍实心#000；
}
t车身{
内部分页符：避免；
边框底部：1px实心#ccc；
}
计划#
所有者
%完整的
HR-123
阿尔瑟·登特
42%
描述：找到旅行指南让我回到地球。
RD-123
佛罗多·巴金斯
9%
描述：找到一个更好的方法把戒指送到魔多。

这里有一个简单的例子，可以让你大致了解我想要实现的目标

编辑：我考虑不使用表，但没有使用，因为（I）我想让我的列对齐，（ii）我真的不想硬编码列宽，以确保它们都是相同的。

尝试将它们全部包装在一个表中将该特定元素设置为块元素（）

然后使用分页符-*

我对表格还没有太多经验，但我建议您使用一些div来显示：inline block和span，因为表格有点复杂…提示：避免在表格、浮动元素和带边框的块元素中使用分页符属性。您建议使用哪个元素来生成

inline block

？还是你建议完全放弃表格布局？我在

上尝试了它，但这导致我的列没有对齐（这是我的要求）。

和

之间的其他元素无效。您可以尝试在

中添加块元素，并对这些元素应用

内部分页符：avoid

。