CSS page-break-before not working on table row

Question

I have a HTML table like so:

<table>
        <tr>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
        </tr>
        <tr>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
        </tr>
        <tr class="page-break">
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
        </tr>
        <tr>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
        </tr>
        <tr>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
        </tr>
        <tr>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
        </tr>
    </table>

What I am trying to do is apply a page-break before the third row when printing.

I have applied the following CSS:

@media print {
            tr.page-break {
                page-break-before: always;
            }
}

Which did absolutely nothing, then I applied display: block to this CSS code like so:

@media print {
            tr.page-break {
                page-break-before: always;
                display: block;
            }
}

It doesn't do the page breaks and it also messes up my table when printing, what am I doing wrong?

page-break-before => You cannot use this property on an empty
or on absolutely positioned elements. — Sonal Borkar, Dec 18 '18 at 20:33
@user979331 - the edit that I put in the answer is the most accredited solution to this problem, it's apparently a known problem that many have encountered with no better solution available as yet. Could you accept the answer? Happy holidays.. — Rachel Gallen, Dec 19 '18 at 01:00

Rachel Gallen · Accepted Answer · 2018-12-18T22:52:56.750

3

If you are using print media queries, it's best to add !important to the styles specified within the print media query (it's one of the few times when adding !important is advocated!)

Try:

@media print {
        tr.page-break {
            page-break-before:always!important;
        }
 }

and see how you go.. Hope this helps

EDIT:

Adjust your CSS to include the following:

 @media print {
  table.report { page-break-after:auto }
  table.report tr    { page-break-inside:avoid; page-break-after:auto }
  table.report td    { page-break-inside:avoid; page-break-after:auto }
  table.report thead { display:table-header-group }
  table.report tfoot { display:table-footer-group }
 }

Source Thank you Majid!

Phew!

edited Dec 18 '18 at 22:52

answered Dec 18 '18 at 21:29

Rachel Gallen

27,943
21
72
81

@user979331 also, ensure the class is defined in the main CSS. You could have .pbrk{} (empty class) or you could instead just add a small margin-top ( 1px or 2px or something). I'd go for the latter – Rachel Gallen Dec 18 '18 at 21:45
1

I found this answer https://stackoverflow.com/questions/45046834/page-break-before-table-row which gives a comprehensive explanation . (basically it says that there has to be 2 divs in the table row, even if one is empty, and put a page-break-before on the second one) The other question it links to has another answer with 97 votes! You could try that.. Curious that it's such a big issue.. – Rachel Gallen Dec 18 '18 at 22:07
That kinda works, its does the page breaks, but it creates a very very long table cell with a border, it will show the first two rows, do a page break, then on the second page have a very long cell with a border (just one cell) and then do the next rows. – user979331 Dec 18 '18 at 22:32
@user979331 if it's only showing 2 rows, I say put page-break-after? (instead of page-break-before?) if your table has a border, that would have the effect of making it appear long, depending on the height of the table rows.. – Rachel Gallen Dec 18 '18 at 22:41

Sonal Borkar · Answer 2 · 2018-12-18T21:19:38.277

2

Try below: No need for @media print

 table tr.page-break{
    page-break-inside: avoid;
    page-break-before: always;
 }

you may need to specify width for the columns.

OR

with @media print

 @media print {
    .page-break  { page-break-before: always; }
 }

edited Dec 18 '18 at 21:19

answered Dec 18 '18 at 20:54

Sonal Borkar

531
1
6
12

I have tried this in Chrome and Safari and it does not work – user979331 Dec 18 '18 at 21:00

CSS page-break-before not working on table row

2 Answers2