Bulletproof page break solution in table row (<tr>) for printing

Question

These were days after days when we could not break the tables according to our need. The solution works for Firefox, but no longer works for my favorite Chrome browser. So far we have tried:

We created the .page-break class and made the necessary CSS for different level holders:

 @media print{ /* applied to our table */ #report-table { /*-webkit-region-break-inside: auto; //tried for Chrome */ page-break-inside:auto } /* applied to all our <tr> */ #report-table tbody tr, #report-table .behave-tbody .behave-tr{ /*-webkit-region-break-inside: avoid; //tried for Chrome */ page-break-inside:avoid; break-after: auto; page-break-after: auto; } /* page break specific class */ .page-break{ break-after: always; /*-webkit-region-break-after: always; //tried for Chrome */ page-break-after: always; } } 

We have found / found so far

• A page break works with a block level element, such as <h1> <p> , etc.
• Google Chrome Page Error for CSS CSS

Remembering them, we continued in different ways:

Step # 1: Trying a Solution Using <table> <tr>

  <table id="report-table"> <thead> <tr> <th>Head</th> </tr> </thead> <tbody> <tr> <td>Body Content</td> </tr> <tr class="page-break"> <td>Body Content</td> </tr> <tr> <td>Body Content</td> </tr> </tbody> </table> 

But this did not work in Google Chrome. Despite the fact that we learned that <tr> itself is a block level element .

Step # 2: creating a table absolutely <div> based on

 <style> .behave-table{ display: table; width: 100%; height: 100%; position: relative; } .behave-thead{ display: table-header-group; } /* th */ .behave-thead .behave-td{ background-color: #ededed; font-weight: 700; } .behave-tbody{ display: table-row-group; } .behave-tr{ display: table-row; } .behave-td{ display: table-cell; padding: 5px; vertical-align: top; } </style> <div id="report-table" class="behave-table"> <div class="behave-thead"> <div class="behave-tr"> <div class="behave-td">Head</div> </div> <!-- /.behave-tr --> </div><!-- /.behave-thead --> <div class="behave-tbody"> <div class="behave-tr"> <div class="behave-td">Body Content</div> </div> <!-- /.behave-tr --> <div class="behave-tr page-break"> <div class="behave-td">Body Content</div> </div> <!-- /.behave-tr --> <div class="behave-tr"> <div class="behave-td">Body Content</div> </div> <!-- /.behave-tr --> </div> <!-- /.behave-tbody --> </div> 

But this does not work in Google Chrome.

Step # 3: Entering a Level Block Element Inside a Table Cell

As instructed by the SO stream, we tried a block level element inside an empty table, as shown below:

 <tr><td>Body Content</td></tr> <tr style="page-break-after: always"><td><h1>Next Section</h1></td></tr> <tr><td>Body Content</td></tr> 

It works partially, only for the first page. We tried to hide an awkward text block using the Bootstrap .sr-only class, but it doesn’t work with this at all. We tried replacing "Next Section" with   - It doesn't work either.

Step # 4: Placing a <div> for a break using a known block level element

 <tr><td>Body Content</td></tr> <div class="page-break"></div> <tr><td>Body Content</td></tr> 

But you know that this will not work, because the <div> inside the table only works inside the table cell:

What you need to do is make sure the div is inside the actual cell of the table, td or th element
- Chris Coyier

Aftermath

We failed our table to tear well in Google Chrome. :(

Answer 1

This is not good, but you can try to go with separation tables for each row. Using the following syntax, you can verify that the columns are displayed with the same width.

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