Firefox printing table on 2nd page - html

Question

I have a small header at the top of my page and then a table containing a decent amount of dynamic data.
The data occasionally falls right on the edge of a page break when printing. So for example.
If there are 19 or less rows in the table, it will all print on 1 page.
If there are 20 or 21 rows it will throw the entire table on the second page.
If there are 22 or more rows it the table, it will print 20 on the first page and 2 on the second page
I don't mind the 1st or 3rd scenario, but I don't care for the second. I realize this is my OCD kicking in, but it seems like someone would know of a fix for it.
This seems to only occur in Firefox. In Chrome the table will always split, around after 18 rows. IE10 seems to always split as well, also at 18 rows.
I've tried every conceivable variation of the following:
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
Im using bootstrap3, if that makes a difference.
Note: You can have it all print on one page by changing the print zoom, but I cant expect my users to do that.
Note: I do realize I could do a hack like check how many rows, and if it falls in the bad range, add or remove some padding somewhere on the page. But I'd rather do it the correct way, assuming there is one.
UPDATE: I Found out this happens only when Firefox is at the 100% zoom setting. When you set it to "Shrink To Fit" it behaves as the other browsers do. IE10, even with zoom set to 100% behaves normally.

Answer 1

You could try to add css:
table {page-break-before: avoid;}

Answer 2

You can put your tr inside tag but as div doesnot support tr so you have to make structure of your table like
replace
<table>
<tr >
<td class="fixture-table-header">Location Name</td>
<td class="fixture-table-header">Fixture Type</td>
<td class="fixture-table-header">Fixture Photo</td>
<td class="fixture-table-header">Qty</td>
<td class="fixture-table-header">Input Watts</td>
<td class="fixture-table-header">Annual Hours</td>
<td class="fixture-table-header">kW</td>
<td class="fixture-table-header">Annual kWh</td>
<td class="fixture-table-header">Total Utility Incentive Avaiable</td>
<td class="fixture-table-header">Total Proposed Cost</td>
</tr>
</table>
with
<table >
<tr>
<td><div><table><tr style="page-break-inside : avoid">
<td class="fixture-table-header">Location Name</td>
<td class="fixture-table-header">Fixture Type</td>
<td class="fixture-table-header">Fixture Photo</td>
<td class="fixture-table-header">Qty</td>
<td class="fixture-table-header">Input Watts</td>
<td class="fixture-table-header">Annual Hours</td>
<td class="fixture-table-header">kW</td>
<td class="fixture-table-header">Annual kWh</td>
<td class="fixture-table-header">Total Utility Incentive Avaiable</td>
<td class="fixture-table-header">Total Proposed Cost</td>
</tr></table></div></td>
</tr>
</table>
and then add this css
#media print
{
#page {size: landscape} //optional
table { page-break-after:auto }//optional
div { page-break-inside:avoid; page-break-after:auto }
}