-moz-transform CSS doesn't help to prevent unnecessary page break during printing on Firefox-CodePudding

I have two <table>s, header and details respectively as shown below:

<table id="header">
   <!-- many rows here -->
</table>
<table id="details" style="break-before: always;">
   <!-- many rows here -->
</table>

As you can see, I want the details always be printed in the new page and NOT the header. When the header grows slightly more rows, the last row of header goes beyond the first page, so I fixed it with the following on Google Chrome:

$("body").css("zoom", 0.93);

However, for Firefox, I can't make it work even with the following:

$("body").css("-moz-transform", "scale(0.9)");

Looks like Firefox is always retaining the original page break even after scaling down, which means the last tr of header always goes to the second page. I even tried the following but no luck:

<!-- last row of header table -->
<tr style="break-before: avoid;">

How can I make it work for Firefox? Thanks a lot!

CodePudding user response：

Strangely, the following works although it seemed to be impossible for the page margin to increase as the contents scaled down on Firefox:

/* For Chrome */
$("body").css("zoom", 0.93);
/* For Firefox */
$("body").css("-moz-transform", "scale(0.93)");
$('head').append('<style>@page{margin: 0.3cm;}</style>');