4

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.

Jason C
  • 38,729
  • 14
  • 126
  • 182
  • 1
    This thread may have your answer: https://stackoverflow.com/questions/8712677/how-to-apply-css-page-break-to-print-a-table-with-lots-of-rows – Charlie Heflin Jul 13 '17 at 18:41
  • @CharlieHeflin Thanks. I actually found that earlier and tried some of the things, but I just now looked at it much more closely and went through every answer. I was able to come up with a weird thing from there that seems to work, although I don't understand it. Thanks again. – Jason C Jul 13 '17 at 19:07

1 Answers1

14

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.

Jason C
  • 38,729
  • 14
  • 126
  • 182
  • 1
    This solution is great in that it doesn't require any special styling changes to existing tables you may have and can be programmatically inserted just about anywhere. Additionally you can style the `td` to be zero pixel height so it doesn't affect the content of the table. Wish I didn't have to wade through 10 different stackoverflow pages to find this one :-) – jcjones1515 Jul 31 '19 at 20:43