jQuery / CSS：如何动态添加分页符

Question

我有一个HTML页面，其中包含一个表单大表，用户可以在其中动态删除，移动和添加行。

打印表单时，页面上的行数不应超过25行，以防止字体过小，避免出现其他布局问题。 因此，我想在每25行后动态添加分页符。

我在 CSS端上遇到的唯一问题是page-break-after样式，它可能会与动态添加的div（如<div class="page-break"></div>）一起使用但我不是确定这里的正确方法。

在 jQuery端，以下内容应该为我提供表格中的当前行数：

$(this).closest('table').find('tbody > tr').length

另外，我实际上不需要创建一个真正的新页面，只是想重新添加表格的头部，以便每个打印的页面都以相同的thead开头，然后包含最多25行。

有人可以帮我分享这样的链接或示例，或者如果根本不可能的话，你可以告诉我吗？

非常感谢， 麦克

Answer 1

您使用THEAD和TFOOT标签吗？ 这正是这些标签的用途：）

Documentation：

  

表行可以分为头部，脚部和主体部分（分别通过THEAD，TFOOT和TBODY元素）。行组传达额外的结构信息，并且可以由用户代理以强调该结构的方式呈现。用户代理可以利用头部/身体/脚部分来支持独立于头部和脚部的身体部分的滚动。 打印长表时，可能会在包含表格数据的每个页面上重复显示头部和脚部信息。

Answer 2

某些浏览器默认使用thead标记允许此操作，但如果您需要所有浏览器的解决方案，则可以强制执行该样式：

thead {
    display: table-header-group;
}

显然你需要使用thead来配合它。