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

Question

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

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

红线表示我希望桌子打破的地方。

如何 ？

到目前为止我所拥有的：

目前，我能够使用下面的 CSS 打印第一页底部的图例：

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

但是我的表格正打印在图例 div 上，将自身叠加在图例上。

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

黑客 #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>

这有点工作，但不是很好，因为它是硬编码的。表格数据变化，表格边框上下移动。

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