分页符不能处理tbody问题 [英] Page break not working with tbody issue
问题描述
我使用表格
在
用户代理必须将这些属性应用于根元素的
正常流中的块级元素。用户代理也可以将这些
属性应用于其他元素,例如'table-row'元素。
尽管规格假设用户代理 也可以在 Apply page-在 像这样: 这是你的工作小提琴:http://jsfiddle.net/abhitalks/DTcHh/3054/ 另外请注意,这本身并不能解决所有问题。您必须谨慎地定义您的页面上下文和适当的边距和尺寸以适合您的使用情况。 这会给您一个开始: 这里是一个片段用一个非常简单的例子来试用它。要进行测试,请检查打印预览,每个 table-row
上应用这些属性,单词 may 发挥其作用,并且跨实现的行为不统一。解决方案:
tbody
上打破块级别的伪元素,而不是直接将它应用于 tbody
。
tbody :: after {
content:' ;显示:块;
page-break-after:always;
page-break-inside:avoid;
page-break-before:avoid;
code $
@page {
size:A4;
保证金:0;
}
@media print {
html,body {
width:210mm;
身高:297mm;
}
...
}
tbody
后应该有两个分页符。 snippetdata-lang =jsdata-hide =true>
table,th,td {border:1px solid gray;边界崩溃:崩溃; } th,td {padding:8px; } tbody:first-of-type {background-color:#eee; } @page {size:A4; margin:0;} @ media print {html,body {width:210mm;高度:297mm; } tbody :: after {content:'';显示:块; page-break-after:always; page-break-inside:avoid; page-break-before:avoid; }}
< div> < a href =#onClick =window.print();>打印< / a>< / div>< hr />< table> < THEAD> < TR> < th> Head 1< / th> < th> Head 2< th> < th>头3< th> < / TR> < / THEAD> < TBODY> < TR> < td>第1行单元格1< / td> < td>第1行第2小节< / td> < td>第1行单元格3< / td> < / TR> < TR> < td>第2行单元格1< / td> < td>第2行第2格< / td> < td>第2行第3格< / td> < / TR> < / tbody的> < TBODY> < TR> < td>行3单元格1< / td> < td>第3行第2格< / td> < td>第3行第3格< / td> < / TR> < TR> < td>行4单元格1< / td> < td> Row 4 Cell 2< / td> < td> Row 4 Cell 3< / td> < / TR> < / tbody的> < TFOOT> < TR> < th>脚1< / th> < th> Foot 2< / th> < th> Foot 3< / th> < / TR> < / tfoot>< / table>
免责声明 :我仅针对Chrome v39进行了测试。您需要申请您自己的测试。
。
I am generating print report using table
in twitter-bootstrap layout.
I am having multiple tbody
inside table
;
While Printing i need page-break-after
while each tbody
so i have applied print-css
@media print {
tbody{
page-break-after: auto;
page-break-inside: avoid;
border: none !important;
margin-bottom: 20px !important;
}
}
the issue
while applying style
page-break-after
totbody
, pagebreak not working see herebut when applying
display:block
totbody
gives me desired result but the layout of table is distorting after changingtbody
display:table-row-group
todisplay:block
See Here
I want to break the page after tbody using page-break-after: auto;
.
Scenario is given below
This is a known problem. page-break
properties apply only to block-level elements.
This is why you are not getting page-breaks on your tbody
. When you explicitly change tbody
from its display: table-row-group
to display: block
, then the page-breaks will start applying. But, then this will break the layout of your table.
As per specs: 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
Although, the specs say that user agents may also apply these properties on table-row
, the word "may" plays its role and the behaviour is not uniform across implementations.
Solution:
Apply page-break to a block-level pseudo-element on your tbody
instead of directly applying it to tbody
.
Like this:
tbody::after {
content: ''; display: block;
page-break-after: always;
page-break-inside: avoid;
page-break-before: avoid;
}
Here is your working fiddle: http://jsfiddle.net/abhitalks/DTcHh/3054/
Also, note that this alone will not solve all of your problems. You must carefully define your page-context and appropriate margins and dimensions to suit your use-case.
This will give you a start:
@page {
size: A4;
margin: 0;
}
@media print {
html, body {
width: 210mm;
height: 297mm;
}
...
}
Here is a snippet with a very simple example to try it out. To test, check the print preview, there should be two page-breaks, one after each tbody
.
Snippet:
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>
Disclaimer: I have tested it only against Chrome v39. You need to apply your own tests.
.
这篇关于分页符不能处理tbody问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!