How can I split a long HTML table using print-CSS, so that the split in the table on the first page leaves space for a div at the bottom of the page?

Question

I have a mutli-page document that is displayed in a browser window. The document is a long table and a legend.

I want the table to stop printing some 300 pixels before the bottom of the page, then print the legend, and then continue printing the table on the second page.

The red line indicates where I want the table to break.

How ?

What I have so far:

Currently I was able to print the legend at the bottom of the first page, using CSS below:

    @media print {
        #legend {
            position: absolute;
            bottom: 0;
        }
    }

But my table is printing right over the legend div, superimposing itself over the legend.

What I need is for the table div to stop printing before the legend div, then print the legend div, then continue the table on the next page.

Hack #1

I could force a page break on a certain row, by using

<style>
.page-break-tr {
    page-break-after: always;
}            
</style>

<!-- row i.e. 15, which is controlled by a loop in the code -->
<tr class="page-break-tr"> 

<!-- normal row -->
<tr>

This kinda works but not exactly great, since it's hardcoded. Table data changes, moving table border up and down.

I would like to ideally find a better way to handle these.