html – 分页符不能与tbody问题一起使用

概述我正在使用 twitter-bootstrap布局中的表生成打印报告. 我在桌子里面有多个tbody; 虽然打印我需要分页后每个tbody 所以我申请了print-css @media print { tbody{ page-break-after: auto; page-break-inside: avoid; border: none ! 我正在使用 twitter-bootstrap布局中的表生成打印报告.

我在桌子里面有多个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进行了测试.您需要应用自己的测试.

.

总结

以上是内存溢出为你收集整理的html – 分页符不能与tbody问题一起使用全部内容，希望文章能够帮你解决html – 分页符不能与tbody问题一起使用所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。