I have a table and I want to force a page break at a specific <tr> element. So, this is the basic table setup:
<table>
<tbody>
<tr> </tr>
<tr>
<td><p>test text before break</p></td>
</tr>
<tr class="page-break"> </tr>
<tr>
<td><p>test text after break</p></td>
</tr>
<tr> </tr>
</tbody>
</table>
And for css styling:
@media print {
.page-break {
page-break-before: always;
break-before: always;
}
}
Note that page-break-before and page-break-after have apparently been replaced by break-before and break-after (see here). I included both in the css example here to make sure all browsers are compatible (see here and here for browser compatibilities).
Now, the above table and css works in Firefox; does exactly what is expected and places a page break before the <tr> element. BUT, it does nothing in Chrome or Opera (haven't tested other browsers yet).
There have been some discussions on this subject on stackoverflow (see here, for example), but most are outdated and the checked solutions there also don't work in Chrome or Opera. For instance, changing the <tr> element to display: block has no impact (Firefox adds the page break whether the <tr> element is a block or not, and Chrome or Opera do nothing whether or not it is a block).
So I want to start this discussion anew in 2020 to try to find a proper cross-browser solution. So far I haven't been able to find any solution to force a page break within a table that works with Chrome and Opera. Would also like to verify what works in Safari, Edge, etc.
