html - 分页符不适用于 tbody 问题

Question

我正在使用 twitter-bootstrap 中的 table 生成打印报告布局。该页面在一个table 中有多个tbody；在打印页面时，它需要一个 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

我想使用 page-break-after: auto; 在 tbody 之后分页。

场景如下

Answer 1

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

这就是为什么您的 tbody 上没有分页符。当您明确地将 tbody 从其 display: table-row-group 更改为 display: block 时，分页符将开始应用。但是，这会破坏表格的布局。

根据规范: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

尽管规范说用户代理可能也将这些属性应用于table-row，但“可能”发挥其作用，并且行为在不同的实现中并不统一。

解决方案:

将分页应用于 tbody 上的 block 级伪元素，而不是直接将其应用于 tbody。

像这样:

tbody::after {
    content: ''; display: block;
    page-break-after: always;
    page-break-inside: avoid;
    page-break-before: avoid;        
}

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

.