Page Break Before Table Row

Applying page-break-before to a table row (tr)

Inside <head>, set this style in your CSS stylesheet

<head>
    <style>
        @media print {
            tr.page-break  { display: block; page-break-before: always; }
        }   
    </style>
</head>

That way, it will produce a page break during printing right before this table row.

<tr class="page-break">
</tr>

CSS page-break-before not working on table row

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!

Page break before table row

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.

Allow page breaks inside tr and td elements

According to the specs, the page-break-inside property applies to block elements although user agents could apply it to other elements:

User Agents must apply these properties to block-level elements in the normal flow of the root element. User agents may also apply these properties to other elements, e.g., 'table-row' elements.

So one possibility (that may not be ideal) would be to change the display of the rows when printing so they are display: block instead of the default display: table-row. Something like this (this is too generic, you may need to make it more specific):

@media print {
    tr {
        page-break-inside: initial;
        display: block;
    }
}

I tested and it works fine on Chrome and Safari, but doesn't seem to work on Firefox:

Printing dialog

Bullet proof solution for page break on table row (tr) for printing

It is not nice but you could try to go with separat tables for each row. By using the following syntax you can make sure the columns are rendered in the same widths.

<style>
    table {
        page-break-inside: avoid;
    }
</style>

<table>
    <colgroup>
        <col width="25%" />
        <col width="50%" />
        <col width="25%" />
    </colgroup>
    <tr>
        <td>Narrow column</td>
        <td>Wide column</td>
        <td>Narrow column</td>
    </tr>
</table>
<!-- can break -->
<table>
    <colgroup>
        <col width="25%" />
        <col width="50%" />
        <col width="25%" />
    </colgroup>
    <tr>
        <td>Narrow column</td>
        <td>Wide column</td>
        <td>Narrow column</td>
    </tr>
</table>

How to apply CSS page-break to print a table with lots of rows?

You can use the following:

<style type="text/css">
   table { page-break-inside:auto }
   tr    { page-break-inside:avoid; page-break-after:auto }
</style>

Refer the W3C's CSS Print Profile specification for details.

And also refer the Salesforce developer forums.