从Chrome打印时,仅在tbody之间分页
Jef*_*f B 6 html css printing html-table page-break
我有一个<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)我真的不想硬编码列宽以确保它们都是一样的.