Page break before table row

问题

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">&nbsp;
  <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">&nbsp;
  <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">&nbsp;
  <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.

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.

There is also How to apply CSS page-break to print a table with lots of rows?, where I've tried:

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.

回答1:

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:

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.

If the cell only contains one div it doesn't work. Unlike in that answer, clear:both does not seem to matter, nor does the third div.

I was unable to find a working solution that did not involve adding divs to the tr (e.g. with pseudo-elements).

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 the tr) did not work for me.

来源：https://stackoverflow.com/questions/45046834/page-break-before-table-row

标签

html

css

printing

css-tables