CSS page-break-before not working on table row

user_979331 0
Viewed 4499

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?

media-queries css html
2 Answers

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!

user_16759540

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; }
 }
user_106984280
Related