I am facing a challenge with printing two tables, named header and details, on separate pages. The structure of the tables is as follows:
<table id="header">
<!-- multiple rows here -->
</table>
<table id="details" style="break-before: always;">
<!-- multiple rows here -->
</table>
The issue arises when the number of rows in the header table causes its last row to spill onto the next page, which I managed to fix for Google Chrome by adjusting the zoom level:
$("body").css("zoom", 0.93);
However, my attempts to resolve this problem for Firefox using CSS transformations have been unsuccessful:
$("body").css("-moz-transform", "scale(0.9)");
It appears that Firefox maintains the original page break even after scaling down, leading to the last tr of the header table spilling over to the second page. I also tried utilizing the break-before property within the table row but did not achieve the desired outcome:
<!-- last row of header table -->
<tr style="break-before: avoid;">
If anyone has insights on how to overcome this issue specifically for Firefox, your assistance would be greatly appreciated. Thank you!