When Printing Page Table Rows/Cells Gets Split on Page Break

When printing page table rows/cells gets split on page break

You can have a look at the page-break-before css property. For example you can set it to auto on each of your cells.

Bur I can't guarantee this will work, each navigator prints a little differently. Firefox is known to have problems printing big tables (more than a page) for example.

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>

avoid page break inside row of table

You might try this with CSS:

<table class="print-friendly">
 <!-- The rest of your table here -->
</table>

<style>
    table.print-friendly tr td, table.print-friendly tr th {
        page-break-inside: avoid;
    }
</style>

Most CSS rules don't apply to <tr> tags directly, because of exactly what you pointed out above - they have a unique display style, which doesn't allow for these CSS rules. However, the <td> and <th> tags within them usually do allow this kind of specification - and you can easily apply such rules to ALL child-<tr>'s and <td>'s using CSS as shown above.

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.

Html table breaking row when printing

Change your CSS to this

 @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 }
 }

and also remove all extra

<tbody>...</tbody>

, you should have only one

<tbody></tbody>

and all tr between that.

that should work for you.

ref: https://www.w3.org/TR/css-print/

Printing HTML tables without splitting a row across two pages

You probably want to play around with page-break-before/after: auto. page-break-inside would be ideal but its not supported by most browsers.

Take a look here http://www.westciv.com/style_master/academy/css_tutorial/advanced/printing.html for some good info.

Page break in table if there is an overflow

Use Javascript:

Parse data inpage and reformat
Get table height
If table height > page allowed height = add a new table
Each page fits into:
div.page {
height: 842px;
width: 595px;
}

The simplest way of achieving this is a print button that opens a new page, the data is there in a format that Javascript can convert it into a table.

This is the only real accurate way I know of configuring a page of data that splits in tables.

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

When Printing Page Table Rows/Cells Gets Split on Page Break