这是一个已知问题。page-break属性仅适用于块级元素。
这就是为什么您的tbody. 当您明确地tbody从其 更改display: table-row-group为 时display: block，分页符将开始应用。但是，这会破坏你的桌子的布局。
根据规格：http ://www.w3.org/TR/CSS21/page.html#page-break-props
用户代理必须将这些属性应用于根元素的正常流程中的块级元素。用户代理也可以将这些属性应用于其他元素，例如“table-row”元素
尽管规范说用户代理也可以将这些属性应用于，但“可能table-row”这个词发挥了作用，并且在不同的实现中行为并不统一。
解决方案：
将分页符应用于您的块级伪元素，tbody而不是直接将其应用于tbody.
像这样：
tbody::after {
content: ''; display: block;
page-break-after: always;
page-break-inside: avoid;
page-break-before: avoid;
}
这是您的工作小提琴：http: //jsfiddle.net/abhitalks/DTcHh/3054/
另外，请注意，仅此一项并不能解决您的所有问题。您必须仔细定义页面上下文以及适当的边距和尺寸以适合您的用例。
这会给你一个开始：
@page {
size: A4;
margin: 0;
}
@media print {
html, body {
width: 210mm;
height: 297mm;
}
...
}
这是一个带有一个非常简单的示例的片段来尝试一下。要进行测试，请检查打印预览，应该有两个分页符，每个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>
免责声明：我仅针对 Chrome v39 对其进行了测试。您需要应用自己的测试。
.
