分页符不能处理tbody问题 [英] Page break not working with tbody issue

问题描述

我使用表格在

用户代理必须将这些属性应用于根元素的
正常流中的块级元素。用户代理也可以将这些
属性应用于其他元素，例如'table-row'元素。

尽管规格假设用户代理 也可以在 table-row 上应用这些属性，单词 may 发挥其作用，并且跨实现的行为不统一。解决方案：

Apply page-在 tbody 上打破块级别的伪元素，而不是直接将它应用于 tbody 。

像这样：

  tbody :: after {
 content：' ;显示：块; 
 page-break-after：always; 
 page-break-inside：avoid; 
 page-break-before：avoid; 
 
 code $ 
 
 
 
  这是你的工作小提琴：http://jsfiddle.net/abhitalks/DTcHh/3054/    
 
 
 
另外请注意，这本身并不能解决所有问题。您必须谨慎地定义您的页面上下文和适当的边距和尺寸以适合您的使用情况。
 
 
 
这会给您一个开始：
  @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 to tbody , pagebreak not working see here

• but when applying display:block to tbody gives me desired result but the layout of table is distorting after changing tbody display:table-row-group to display: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屋！