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

user_1387588 0
Viewed 58066

According to W3.org, the style page-break-after applies to block level elements (http://www.w3.org/TR/2004/CR-CSS21-20040225/page.html#page-break-props)

<tr> is a block level element (according to this: http://www.htmlhelp.com/reference/html40/block.html, it is)

I'm doing this, but the page break is not creating an actual page break when printing:

  <table>
    <tr><td>blah</td></tr>
    <tr><td>blah</td></tr>
    <tr style="page-break-after: always"><td>blah</td></tr>
    <tr><td>blah</td></tr>
  </table>

Am I doing this the correct way?

If <tr> wasn't a block level element: how am I suppose to achieve this page break?

Note: the before code is just an example, but what I'm trying to do is to put a page-break every 5 rows of the table, so if you know any tips for that case, will be appreciated

page-break css
3 Answers

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