分页符不适用于tbody问题 [英] Page break is not working with the tbody issue
问题描述
我正在使用
用户代理必须将这些属性应用于根元素的正常流动.用户代理也可以应用这些其他元素的属性,例如表行"元素
尽管,规范说用户代理 可能 还将这些属性应用于 table-row
,单词" may "发挥作用,并且行为在各个实现中都不统一.
解决方案:
将分页符应用于 tbody
上的块级伪元素,而不是直接将其应用于 tbody
.
赞:
tbody :: after {内容: '';显示:块;分页后:始终;page-break-inside:避免;page-break-before:避免;}
这是您的工作提琴: http://jsfiddle.net/abhitalks/DTcHh/3054/
此外,请注意,仅此一项并不能解决您的所有问题.您必须仔细定义页面上下文以及适当的边距和尺寸以适合您的用例.
这将为您提供一个开始:
@page {尺寸:A4;边距:0;}@media print {html,正文{宽度:210mm;高度:297mm;}...}
这是一个片段,其中包含一个非常简单的示例来进行尝试.要进行测试,请检查打印预览,应该有两个分页符,每个 tbody
之后都有一个.
代码段 :
table,th,td {边框:1px纯灰色;边界崩溃:崩溃;}th,td {padding:8px;}tbody:first-of-type {background-color:#eee;}@页 {尺寸:A4;边距:0;}@media print {html,正文{宽度:210mm;高度:297mm;}tbody ::之后{内容: '';显示:块;分页后:始终;page-break-inside:避免;page-break-before:避免;}}
< div>< a href =#" onClick ="window.print();">打印</a></div>< hr/>< table>< thead>< tr><头1< th<头部2< 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>行4单元2< td>< td>行4单元3< td></tr></tbody>< tfoot>< tr><脚1/thth脚2/thth脚3/th</tr></tfoot></table>
免责声明 :我仅针对Chrome v39进行了测试.您需要应用自己的测试.
.
I am generating a print report using table
in twitter-bootstrap layout. The page has multiple tbody
inside a table
; While Printing the page it requires a page-break-after
each tbody
To do so, I have applied print-css
@media print {
tbody{
page-break-after: auto;
page-break-inside: avoid;
border: none !important;
margin-bottom: 20px !important;
}
}
What is the issue?
while applying the style
page-break-after
to atbody
, page-break is not working see herebut when applying
display:block
totbody
, it gives desired result but the layout of table is being distorted 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屋!