表格行前的分页符 [英] Page break before table row
问题描述
我有一个表，希望在打印时在某些TR之前强制分页，所以我四处搜索并找到了在网页上应用分页之前到表行（tr），看起来很简单：将display设置为 block 并使用 page-break-before 照常。但是，它似乎不起作用（至少在Chrome 59，Windows中不起作用）。例如：
I have a table where I want to force page breaks before certain TR's when printing, so I searched around and found Applying "page-break-before" to a table row (tr), seemed simple enough: set display to block and use page-break-before as usual. However, it doesn't seem to be working (at least not in Chrome 59, Windows). For example:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
tr.break-here {
display: block;
page-break-before: always;
}
</style>
</head>
<body>
<table>
<tr class="break-here"><td colspan="2">
<tr><td colspan="2">section
<tr><td>a<td>b
<tr><td>a<td>b
<tr><td>a<td>b
<tr class="break-here"><td colspan="2">
<tr><td colspan="2">section
<tr><td>a<td>b
<tr><td>a<td>b
<tr><td>a<td>b
<tr class="break-here"><td colspan="2">
<tr><td colspan="2">section
<tr><td>a<td>b
<tr><td>a<td>b
<tr><td>a<td>b
</table>
</body>
</html>
打印时，所有这三个部分都在同一页面上，但应该是三个单独的页面
When printed, all three of those sections are on the same page, but it should be three separate pages.
有人建议使用伪元素，但我没有用。还有建议确保TR的TD包含块级元素，因此在该示例中，我尝试将空div放入相关单元格中，而且也保持不变。
There was a suggestion there to use a pseudo-element, which I tried to no avail. There was also a suggestion to ensure the TR's TD contained a block-level element, so I tried putting empty div's in the relevant cells in that example, also with no change.
还有如何应用CSS分页符来打印具有很多行的表？，我在这里尝试过：
There is also How to apply CSS page-break to print a table with lots of rows?, where I've tried:
- < a href = https://stackoverflow.com/a/12934695/616460>此答案：无效：
-
tr.break-here {display：block; page-break-after：总是; } -
tr.break-here {page-break-after：always; }
- This answer: No effect:
tr.break-here { display:block; page-break-after:always; }tr.break-here { page-break-after:always; }
我在这里做错了什么？我该怎么做呢？我也有些困惑，因为链接问题的答案似乎很受欢迎，评论中没有发现任何问题。将表分为三个表不是一个选择，因为我需要所有页面上的列宽度（自动适应复杂内容）保持一致。
What am I doing wrong here? How do I do this? I'm also a little confused because the answer on the linked question seems well received with no issues noted in comments. Splitting the table into three tables is not an option, as I need column widths (which are auto-fit to complex content) to be identical on all pages.
推荐答案
我找到了基于这个答案和一些实验，我不知道它为什么起作用：
I found a solution based on this answer and some experimentation, I have no idea why it works:
<tr> <td> <div></div> <div style="page-break-before:always"></div>以下所有内容都很重要：
All of the following are important:
- 否
tr上的分页符样式。 - 单元格必须至少包含两个div。
- 除第一个必须是
page-break-before：always以外的任何div。
- No page break styling on the
tr. - The cell must contain at least two divs.
- Any div except the first must be
page-break-before:always.
如果单元格仅包含一个div，则该行将不起作用。与该答案不同，
clear：both似乎并不重要，第三格也不重要。If the cell only contains one div it doesn't work. Unlike in that answer,
clear:bothdoes not seem to matter, nor does the third div.无法找到不涉及在tr中添加div的有效解决方案（例如，使用伪元素）。
I was unable to find a working solution that did not involve adding divs to the tr (e.g. with pseudo-elements).
所以这是我现在正在做的，尽管我不介意有人解释这里发生的事情，或更重要的是，为什么原来链接的问题（
display：block; page-break-before：always;tr上的按钮对我不起作用。So this is what I'm doing for now, although I wouldn't mind somebody explaining what's going on here or, more importantly, why the solution in the original linked question (
display:block; page-break-before:always;on thetr) did not work for me.这篇关于表格行前的分页符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
-
