CSS 将“page-break-before”应用于表格行（tr）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20481039/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Applying "page-break-before" to a table row (tr)
提问by sports
According to W3.org, the style page-break-afterapplies to block level elements (http://www.w3.org/TR/2004/CR-CSS21-20040225/page.html#page-break-props)
根据 W3.org，该样式page-break-after适用于块级元素 ( http://www.w3.org/TR/2004/CR-CSS21-20040225/page.html#page-break-props)
<tr>is a block level element (according to this: http://www.htmlhelp.com/reference/html40/block.html, it is)
<tr>是一个块级元素（根据这个：http://www.htmlhelp.com/reference/html40/block.html，它是）
I'm doing this, but the page break is not creating an actual page break when printing:
我正在这样做，但分页符在打印时不会创建实际的分页符：
<table>
<tr><td>blah</td></tr>
<tr><td>blah</td></tr>
<tr style="page-break-after: always"><td>blah</td></tr>
<tr><td>blah</td></tr>
</table>
Am I doing this the correct way?
我这样做是否正确？
If <tr>wasn't a block level element: how am I suppose to achieve this page break?
如果<tr>不是块级元素：我该如何实现此分页符？
Note: the before code is just an example, but what I'm trying to do is to put a page-break every 5 rows of the table, so if you know any tips for that case, will be appreciated
注意：之前的代码只是一个例子，但我想要做的是在表格的每 5 行放置一个分页符，所以如果你知道这种情况的任何提示，将不胜感激
回答by guest
Inside <head>, set this style in your CSS stylesheet
在里面<head>，在你的 CSS 样式表中设置这个样式
<head>
<style>
@media print {
tr.page-break { display: block; page-break-before: always; }
}
</style>
</head>
That way, it will produce a page break during printing right before this table row.
这样，它会在打印过程中在此表行之前产生一个分页符。
<tr class="page-break">
</tr>
回答by JSuar
The site you referencedstates that <tr>"may also beconsidered a block-level element since it may containblock-level elements." Neither the W3.orgor Mozilla docsstate that <tr>is a block-level element.
您引用的站点指出<tr>“也可能被视为块级元素，因为它可能包含块级元素。” W3.org或Mozilla 文档都没有声明它<tr>是块级元素。
Some Possible Solutions
一些可能的解决方案
Based on the wording and your example, I would ensure that the cell contains a true block-level element. Here are two examples using
<h1>and<p>which are block-level text elements.<tr style="page-break-after: always"><td><h1>Next Section</h1></td></tr> <tr style="page-break-after: always"><td><p>This will be a new page.</p></td></tr>Others have reported similar problems and one of the solutions might work for you.
As mentioned by My Lister, you could attempt to catch the printing actionor generate a print version of the page that would separate the table out so you can obtain the desired page break after every five rows.
根据措辞和您的示例，我将确保单元格包含真正的块级元素。下面是两个使用
<h1>和 的示例，<p>它们是块级文本元素。<tr style="page-break-after: always"><td><h1>Next Section</h1></td></tr> <tr style="page-break-after: always"><td><p>This will be a new page.</p></td></tr>其他人报告了类似的问题，其中一种解决方案可能适合您。
正如My Lister所提到的，您可以尝试捕获打印操作或生成页面的打印版本，将表格分开，以便您可以在每五行后获得所需的分页符。
回答by Ludo
Set all <tr>tags with display:blockand define the page format and the size in mm for the table and cells.
设置所有<tr>标签display:block并定义表格和单元格的页面格式和大小（以毫米为单位）。
Here <td>tag width is set to 23mm as there are 10 td tag with 2mm padding each side (23+2+2)*10=270 which is <table>width.
这里<td>标签宽度设置为 23mm，因为有 10 个 td 标签，每边有 2mm 填充 (23+2+2)*10=270，即<table>宽度。
You can adjust word-breakdepending on how you want to brek the words.
您可以word-break根据您想如何打破单词进行调整。
@media print {
@page {
size:A4 landscape;
margin: 5mm 5mm 5mm 5mm;
padding: 0mm 0mm 0mm 0mm;
}
.table{
width:270mm;
min-width:270mm;
}
td, th{
padding: 2mm 2mm 2mm 2mm !important;
display: table-cell;
word-break:break-all;
width:23mm;
min-width:23mm;
}
tr{
display:block;
}
tr.page-break {
page-break-before: always;
}
}
