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>

Set all <tr> tags with display:block and define the page format and the size in mm for the table and cells.

Here <td> tag width is set to 23mm as there are 10 td tag with 2mm padding each side (23+2+2)*10=270 which is <table> width.

You can adjust word-break depending on how you want to break the words.

@media print {

    @page {
        size:A4 landscape;
        margin: 5mm 5mm 5mm 5mm;
        padding: 0mm 0mm 0mm 0mm;
    }
    .table{
        width:270mm;
        min-width:270mm;
    }
    td, th{
        padding: 2mm 2mm 2mm 2mm !important;
        display: table-cell;
        word-break:break-all;
        width:23mm;
        min-width:23mm;
    }
    tr{
       display:block;
    }
    tr.page-break  { 
       page-break-before: always; 
    }
}

The site you referenced states that <tr> "may also be considered a block-level element since it may contain block-level elements." Neither the W3.org or Mozilla docs state that <tr> is a block-level element.

Some Possible Solutions

  1. Based on the wording and your example, I would ensure that the cell contains a true block-level element. Here are two examples using <h1> and <p> which are block-level text elements.

    <tr style="page-break-after: always"><td><h1>Next Section</h1></td></tr>
<tr style="page-break-after: always"><td><p>This will be a new page.</p></td></tr>

  2. Others have reported similar problems and one of the solutions might work for you.

    • How to apply CSS page-break to print a table with lots of rows?
    • Google Chrome Printing Page Breaks
    • Printing a Gridview - how to print n rows on each page using page break
    • page-break-inside doesn't work in Chrome?

  3. As mentioned by My Lister, you could attempt to catch the printing action or generate a print version of the page that would separate the table out so you can obtain the desired page break after every five rows.

Tags:

Css

Page Break

Recent Posts