我在桌子里面有多个tbody;
虽然打印我需要分页后每个tbody
所以我申请了print-css
@media print {
tbody{
page-break-after: auto;
page-break-inside: avoid;
border: none !important;
margin-bottom: 20px !important;
}
}
问题
>在将样式页面分解后应用于tbody时,分页功能无法正常工作see here
>但是在应用display时：block to tbody给出了我想要的结果但是在更改tbody显示后表格的布局是扭曲的：table-row-group to display：block See Here
我想在tbody使用page-break-after：auto;之后打破页面.
情景如下
解决方法
这就是为什么你没有在你的tbody上获得分页符.当您显式地将tbody从其display：table-row-group更改为display：block时,分页符将开始应用.但是,这将打破你的表的布局.
根据规格：http://www.w3.org/TR/CSS21/page.html#page-break-props
User Agents must apply these properties to block-level elements in the
normal flow of the root element. User agents may also apply these
properties to other elements,e.g.,‘table-row’ elements
虽然规范说用户代理也可以在表行上应用这些属性,但是“可能”这个词扮演了它的角色,而且各个实现的行为并不一致.
解：
将分页符应用于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;
}
...
}
这是一个片段,有一个非常简单的例子来试用它.要进行测试,请检查打印预览,应该有两个分页符,每个分页后一个.
片段：
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进行了测试.您需要应用自己的测试.
.
