问题标签 [page-break-inside]

使用 TCPDF 时，我想避免在表格行内出现分页符。我还获得了 page-break-inside:avoid on style，但它不起作用。有什么解决办法吗？？我的代码：

我正在尝试构建一个 HTML 表格，该表格将填充来自 JSON 的数据并打印在页面上。我在每个 tbody 上放置了多行，我需要的是：如果整个 tbody 不适合打印的页面，它应该选择整个 tbody 并将其移动到新页面而不是在中间切割它。我无法以毫米为单位计算，因为数据将来自 JSON，因此每个 tbody 中可能有 9 行或 2 行，我们不知道。

我做了如下操作，但是分页符属性似乎不起作用？请帮忙。

我的 html 如下：

我的CSS是；

我的页面中有三个Div，类为invoiceHeader、invoiceBody 和invoiceFooter。我想在每个打印页面上重复第一个 div (.invoiceHeader)，并且我想避免在打印时在第三个 Div (.invoiceFooter) 内部分页，页面上将没有页脚。我怎样才能做到这一点？

我正在生成基于 HTML 内容的 PDF 文档，并且遇到了分页问题。我有一个包含许多段落的文档，使用编号列表。这些工作得很好，除非它是一个超出页面末尾的多行段落。

在这种情况下，只有段落编号保留在当前页面上，而段落的整个文本将移至下一页。

我想将数字和所有文本移到下一页 -或者- 在当前页面上显示文本的第一行。换句话说，始终将段落编号和文本放在一起。

我尝试在列表项周围放置 section 或 div 标签并使用break-inside: avoid，但这似乎没有任何效果。

谁能告诉我我在这里错过了什么？

如果我的<div>不合适，我有一个问题，而不是我有一个奇怪的分页符。我认为这与填充有关。有人可以帮我吗？

HTML：

CSS：

导出示例：

我已经在谷歌上来回搜索了几个小时了，出于完全的沮丧，打印表格的看似简单的基本任务，以便以理智的方式分页符似乎完全不可能实现。

背景：HTML/CSS 文件

所有这一切的基础是代表发票的动态 HTML/CSS 页面。它由页眉区域、列出发票项目的表格和页脚区域组成。页眉和页脚区域的大小相当固定（每个高约 5 厘米）；根据发票有多少项目，表格自然会有很大差异。

当发票相当短时，在大多数浏览器中打印（或打印为 PDF）都可以正常工作——整个发票在一页上，看起来很花哨。但是，如果发票越长，事情就会完全崩溃，并且表格会以各种不同的方式被破坏（请参阅下面的“问题”）。

页面上的body元素是一个控制布局的网格容器，表格位于全角部分。问题末尾的小提琴显示了打印时的结构和损坏的布局。

问题：彻底打破多页表

我认为，在打印多页发票时，我希望发生的行为非常合理且符合预期：

• 表格像往常一样在标题区域之后开始
• 如果需要分页符，则在表格行之间添加分页符
• 表格列标题在每页顶部重复

但这在我目前可用于测试的任何浏览器中似乎都是不可能的。

Firefox出于某种原因，根本拒绝破坏表格，只是在 5 厘米标题区域后将整个页面留空，并将表格放在下一页；如果表格本身对于一页来说太高，它将在稍后添加分页符，但忽略break-inside设置并在页面边界上将字母切成两半。（它似乎也不想重复表格标题，尽管我在 Google 上找到的大部分内容都表明这应该在 Firefox 中工作。）

Chrome、Opera 和 Brave 等Chromium 浏览器确实支持 Paged Media 和重复的标题行 - 但它们也忽略break-inside了表格行/单元格（错误声称已修复，但显然没有）并且还在正文行的顶部打印重复的标题行，使输出完全难以辨认。

Safari似乎是唯一真正尊重break-inside表格内容设置并且只在行之间添加分页符的浏览器——但它根本不支持 CSS Paged Media（原因只有 Apple 开发人员知道），所以你无法控制页面大小，边距等，似乎也没有办法让标题行重复。

那么，我是否在这里遗漏了一些重要的东西，或者真的是在 2021 年，似乎没有主流浏览器能够按照您认为它们应该默认打印的方式打印表格？

有没有一种方法可以打印多页表，只在行之间而不是在行内添加分页符，同时仍然确保在每一页上重复标题行并且不打印覆盖在正文行的顶部？

工作片段

我试过了

在 html 中，我在目录之后放置了一个 div；在另一个带有打印的目录之前。

通过分离 Firefox 中的内容，这可以完美地工作，但在 chrome 中，所有内容都显示在 .

我需要打印一些数据模型。模型可以有Compounding Instructions。它是一个 html 内容（可能包含列表项或段落等）。如果复合说明内容不适合页面，我应该分页并在下一页复制标题“复合说明”。

案例 1：如果复合说明内容可以放在一个页面上，它将在下一页（第一张图片）上换行。我不想要它。

案例 2：我添加了table * { page-break-inside: auto; }or table thead { page-break-inside: auto; }。 复合说明标题未显示在下一页（第二张图片）。

我可以使用 JavaScript