我有一个 <table>连续行在概念上相关且需要保持在一起的数据。我将每对行分组在 <tbody> 中标签。当需要打印表格时，我想确保分页符只发生在 <tbody> 之间。标签。
我尝试了 page-break-inside: avoid 的一些变体和 page-break-after: auto , 但似乎无法让它在 Chrome 42 中工作(见下面的截图)
但是，它似乎确实在 Firefox 40 和 IE 11 中按预期工作。看起来像 page-break-*可能只适用于 block 级元素。在 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) 我真的不想硬编码列宽以确保它们都是一样的。
最佳答案
尝试将其全部包装在一个 使特定的 block 元素(http://learnlayout.com/inline-block.html) 然后使用分页符-*
关于html - 从 Chrome 打印时仅在 tbody 之间分页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33309192/