分页符不适用于tbody问题

Question

我正在使用twitter-bootstrap布局中的table生成打印报告。

我在tbody内有多个table;

打印时我需要page-break-after tbody

所以我申请了print-css

@media print {
    tbody{
        page-break-after: auto;
        page-break-inside: avoid;
        border: none !important;
        margin-bottom: 20px !important;
    }
}

问题

• 将样式page-break-after应用于tbody时，分页功能无效 see here

• 但在将display:block应用于tbody时，我会得到所需的结果，但在将tbody display:table-row-group更改为display:block之后，表格的布局会出现扭曲强> See Here

我想在tbody使用page-break-after: auto;后打破页面。

场景如下

Answer 1

这是一个已知问题。 page-break属性仅适用于块级元素。

这就是为什么你没有在tbody上获得分页符的原因。当您明确将tbody从display: table-row-group更改为display: block时，分页符将开始应用。但是，这会打破你桌子的布局。

根据规格：http://www.w3.org/TR/CSS21/page.html#page-break-props

  

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

虽然规格说用户代理 可能 也会在table-row上应用这些属性，但“可能”这个词会播放它的角色和行为在各实现中并不统一。

解决方案：

将分页符应用于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;
    }
    ...
}

这是一个片段，其中有一个非常简单的例子可以尝试一下。要进行测试，请检查打印预览，应该有两个分页符，每个分页符在tbody之后。

<强> 段 ：

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对其进行了测试。您需要应用自己的测试。}

Answer 2

这可以通过这样做：

tbody {
    display: block;
    width: 100%;
    page-break-after: always;
    page-break-inside: avoid;
    page-break-before: avoid;
}

Answer 3

我通过关闭和打开一个新表而不是对<tbody>中的行进行分组来解决了这个问题。 在表CSS中，您可以输入：

display: block;

并且分页符可以在不破坏表布局的情况下工作。