分页符不适用于 tbody 问题 [英] Page break is not working with the tbody issue

问题描述

我正在使用

<块引用>

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

尽管规范说用户代理可能也将这些属性应用于table-row，单词可能" 发挥其作用，并且跨实现的行为并不统一.

解决方案:

将分页符应用到 tbody 上的块级伪元素，而不是直接应用到 tbody.

像这样:

tbody::after {内容: '';显示:块；分页后:总是；page-break-inside:避免；分页前:避免；}

这是你的工作小提琴:http://jsfiddle.net/abhitalks/DTcHh/3054/

另外，请注意，仅此一项并不能解决您的所有问题.您必须仔细定义页面上下文以及适当的边距和尺寸以适合您的用例.

这会给你一个开始:

@page {尺寸:A4；边距:0；}@media 打印 {html，正文{宽度:210mm；高度:297mm；}...}

这是一个带有非常简单示例的片段，可以尝试一下.为了测试，检查打印预览，应该有两个分页符，在每个 tbody 之后.

代码段:

table, th, td { 边框:1px 纯灰色；边框折叠:折叠；}th, td { 填充:8px;}tbody:first-of-type { 背景颜色:#eee;}@页 {尺寸:A4；边距:0；}@media 打印 {html，正文{宽度:210mm；高度:297mm；}tbody::after {内容: '';显示:块；分页后:总是；page-break-inside:避免；分页前:避免；}}

<a href="#" onClick="window.print();">打印</a>
<小时/><表格><头><tr><th>头1</th><th>Head 2</th>第 3 个头</tr></thead><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><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><脚><tr><th>脚1</th>第 2 英尺第 3 英尺</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 a tbody , page-break is not working see here

• but when applying display:block to tbody, it gives desired result but the layout of table is being distorted 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屋！