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

Question

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

打印表格时，页面上的行数不应超过 25 行，以防止字体太小并避免出现其他布局问题。因此，我一直在寻找可以在每 25 行之后动态添加分页符的东西。

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

在 jQuery 方面 下面应该给我 table 中的当前行数：

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

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

有人可以帮我分享一个 link 或类似这样的例子吗？如果这根本不可能，你能告诉我吗？

非常感谢，麦克

Answer 1

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

Documentation:

Table rows may be grouped into a head, foot, and body sections, (via the THEAD, TFOOT and TBODY elements, respectively). Row groups convey additional structural information and may be rendered by user agents in ways that emphasize this structure. User agents may exploit the head/body/foot division to support scrolling of body sections independently of the head and foot sections. When long tables are printed, the head and foot information may be repeated on each page that contains table data.

Answer 2

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

thead {
    display: table-header-group;
}

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

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

jQuery / CSS: How to add page breaks dynamically

javascript

css

jquery

page-break