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

jQuery / CSS: How to add page breaks dynamically

本文关键字：动态添加分页 CSS 何动态 jQuery 更新时间：2023-09-26

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

打印表单时，每页不应超过25行，以防止字体太小，并避免其他布局问题。因此，我正在寻找每隔25行动态添加分页符的东西。

我在CSS方面遇到的唯一一件事是是page-break-after风格，然后可能与动态添加div(如<div class="page-break"></div>)一起使用，但我不确定这里的正确方法。

在jQuery端下面的代码应该会给我当前表中的行数:

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

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

有人能帮我分享一个链接或例子，或者你能让我知道这是不可能的吗?

提前感谢，迈克

是否使用了head和TFOOT标签?这就是这些标签的作用:)

文档:

表行可以分组为头、脚和正文部分(分别通过head、TFOOT和TBODY元素)。行组传递额外的结构信息，并且可以由用户代理以强调这种结构的方式呈现。用户代理可以利用头部/身体/脚的划分来支持独立于头部和脚部分的身体部分的滚动。当打印长表时，头和脚信息可以在包含表数据的每一页上重复出现。

一些浏览器默认允许使用thead标签，但是如果你想要一个适用于所有浏览器的解决方案，那么你可以强制执行样式:

thead {
    display: table-header-group;
}

显然你需要使用thead来配合，尽管