Javascript 打印每页页脚不重叠的多页HTML表

我不知疲倦地搜索，虽然我发现很多人都在问这个问题，但似乎没有任何一致的解决方案

我们有一个页面，用户可以在上面输入日期范围，然后按submit返回数据表。存在一个“打印”按钮，该按钮明显打印生成的数据

正如预期的那样，所有浏览器似乎都能够将长表拆分为多个页面。我们还可以通过使用页脚div和一些CSS在每个页面上显示一些预定义的页脚文本，如下所示：

.footer {
    position: fixed;
    bottom: 0;
}

唯一的问题是表格行的高度不一致，因此在某些页面上有足够的页脚空间，但在其他页面上，表格和页脚重叠

我尝试过的事情：

@page {
    margin-bottom: 10mm;
}

添加边距，但

底部为0页脚的固定位置现在被认为太高，即页面底部仍然有重叠，但有一堆空间。将
bottom
属性设置为负值只会使其显示在下一页的顶部

@page {
    padding-bottom: 10mm;
}

没有明显的效果

…这就是我所能想到的。对此我们能做些什么？我们是否需要某种自定义JS解决方案来计算每页上的行数并手动插入页脚？一定有人在打印页脚方面取得了成功；这似乎不是一个不寻常的要求。
可能有一个更优雅的解决方案，但您可以在JS中使用以下算法来实现这一点：

while there is still vertical room left...
   output a row to DOM
   measure height of new row and recalc how much vertical room is left

要获取元素的高度，可以查看

这可能看起来很痛苦，但您可以对渲染进行很大的控制，并且应该可以正常工作。
请尝试将此添加到css文件的底部或最后一个
正文之后
影响规则最终也会添加
！重要信息
：

@media print {
  body {
    padding-bottom: 10mm;
  }
}

我昨天也遇到了同样的问题，我花了几个小时来解决它。解决办法是
将这些添加到css中

thead { display: table-header-group }

tfoot { display: table-row-group }

tr { page-break-inside: avoid }

ps：永远不要向表中添加相对位置，因为它无法正常工作。
如果没有足够的空间容纳另一行，该怎么办？有没有办法为打印渲染插入分页符？Keith，也许可以尝试使用CSS添加分页符：//www.w3schools.com/cssref/pr_print_pageba.asp不幸的是，
之前的分页符：总是
和
之后的分页符：总是
在Chrome中不起作用。Chrome如何处理打印样式？有什么已知的解决方法吗？我将开始一个新的问题，重点是这个。这有助于社区让你的问题一次只处理一个问题。任何其他遇到这个问题的人：如果你需要Chrome兼容性，JS循环是唯一的方法。将thead保存在变量中（如果适用），循环遍历所有行，计算每行的高度，当到达某个高度断点时，追加该表并移动到新表（每次追加thead）。确保您的表在：始终

之后有

分页符，并且它应该可以工作。这一点都不优雅，但它是唯一在所有浏览器中都有效的东西。对我来说是有效的！谢谢：）