从 Chrome 打印时仅在 tbody 之间分页
Posted
技术标签:
【中文标题】从 Chrome 打印时仅在 tbody 之间分页【英文标题】:Page break only between tbody when printing from Chrome 【发布时间】:2016-01-23 09:28:07 【问题描述】:我有一个<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) 我真的不想硬编码列宽以确保它们都相同。
【问题讨论】:
我对表格还没有多少经验,但我建议您使用一些带有 display:inline-block 和 span 的 div,因为表格有点复杂...... 提示:避免在表格、浮动元素和带边框的块元素中使用分页符。 【参考方案1】:尝试将其全部包装在一个 将其设为块元素 (http://learnlayout.com/inline-block.html) 然后使用 page-break-*
【讨论】:
您建议制作哪个元素inline-block
?还是您建议完全放弃表格布局?我在<tbody>
上尝试过,但这导致我的列没有对齐(这是我的要求)。
<table>
和 <td>
之间的附加元素无效。您可以尝试在<td>
中添加块元素,并将page-break-inside: avoid
应用于这些元素。以上是关于从 Chrome 打印时仅在 tbody 之间分页的主要内容,如果未能解决你的问题,请参考以下文章
使用 NSPersistentCloudKitContainer 时仅在本地存储一些实体
为啥使用 AlarmManager.setAlarmClock() 设置时仅在三星 Android 9 设备上不显示闹钟图标?