How to Deal With Page Breaks When Printing a Large HTML Table

How to deal with page breaks when printing a large HTML table

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
    table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
</style>
</head>
<body>
    <table>
        <thead>
            <tr><th>heading</th></tr>
        </thead>
        <tfoot>
            <tr><td>notes</td></tr>
        </tfoot>
        <tbody>
        <tr>
            <td>x</td>
        </tr>
        <tr>
            <td>x</td>
        </tr>
        <!-- 500 more rows -->
        <tr>
            <td>x</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

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.

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 print a large HTML table with page breakers?

you could try using orphans to specify the number of empty lines to be left at the bottom of a page; if an element's layout conflicts with an orphans setting, the element will be printed on the next page. browser support is pretty shoddy though. i would set it on tr for your example, like this:

tr{orphans:3}

How to Deal With Page Breaks When Printing a Large HTML Table