如何使用打印CSS拆分一个长HTML表格，以便第一页表格中的拆分为页面底部的div留出空间？

我有一个显示在浏览器窗口中的多页文档。文档是一个长表和一个图例

我希望表格在页面底部之前停止打印大约300像素，然后打印图例，然后在第二页继续打印表格

红线表示我希望表格在哪里断开

怎么做

到目前为止我拥有的：

目前，我可以使用CSS在第一页底部打印图例，如下所示：

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

但我的表格正好打印在legend div上，将自身叠加在legend上

我需要的是表格div在图例div之前停止打印，然后打印图例div，然后在下一页继续表格

Hack#1

我可以使用

<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>

.分页符{
分页符后：始终；
}            

这种方法可以工作，但不太好，因为它是硬编码的。表数据更改，上下移动表边框

理想情况下，我希望找到更好的方法来处理这些问题