html – 分页符不能与tbody问题一起使用
我正在使用
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 我想在tbody使用page-break-after:auto;之后打破页面. 情景如下 解决方法
这是一个已知问题.分页符属性仅适用于块级元素.
这就是为什么你没有在你的tbody上获得分页符.当您显式地将tbody从其display:table-row-group更改为display:block时,分页符将开始应用.但是,这将打破你的表的布局. 根据规格:http://www.w3.org/TR/CSS21/page.html#page-break-props
虽然规范说用户代理也可以在表行上应用这些属性,但是“可能”这个词扮演了它的角色,而且各个实现的行为并不一致. 解: 将分页符应用于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进行了测试.您需要应用自己的测试. . (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |