打印时防止表格分页

Question

我有一个页面正在尝试设置用于打印。该页面包含大量单独的表格。这些表格的大小各不相同，但一般来说，我可以在每页上放置 2.5 到 3 个表格。我希望能够防止表格因分页符而损坏。知道我怎样才能做到这一点吗？

我尝试了这个：

.reportTable {
    page-break-inside: avoid;
}

不幸的是， page-break-inside 似乎仅在 Opera 中受支持（根据 W3Schools - 我证实这在 Firefox 4.0.1 中不起作用）。

我可以这样做，以在每个表格之后强制分页：

.reportTable {
    page-break-after: always;
}

这可以插入分页符，并且似乎在所有主要浏览器中都受支持，但它在打印文档上留下了大量浪费的空间（大约每个表格的一半）页面为空白）。如果整个下一个表格不适合本页，我真的只需要分页符。

我知道我的用户使用 Internet Explorer、Firefox 和 Safari，所以我真的很想尽可能地支持这些产品。找到同样适用于 Chrome 和 Opera 的东西将是一个非常好的奖励。

有什么想法吗？

Answer 1

我也一直在寻找这个问题的答案。我最接近的是知道一个页面上可以容纳多少行输出，然后计算该页面有多少行输出。在你的情况下：
1）计算出一页上可以容纳多少行输出。
2) 通过显示第一个表格来跟踪您已经使用了多少行。
3）计算表2需要多少行。将其添加到表 1 的行中，看看您是否仍低于近似阈值。如果是，则显示该表格，如果不是，则放置一个带有分页符的 div：始终在其中以强制创建一个新表格。

这将为您提供大约您正在寻找的内容，但它不会是完美的。每隔一段时间，您就会有一个“可以”适合上一页的表格，但只是没有完全满足要求，因为您必须估计一页上适合多少行。

然而，我还没有找到一种方法来考虑单元格内的内容或类似内容在被挤入打印输出页面时是否会换行成新行。

希望这能激发您的灵感。

Answer 2

目前似乎没有办法强制不支持page-break-inside:void的浏览器这样做。

但是，由于您每页可以容纳 2.5 到 3 个表格，并且不希望使用 page-break-after:always; 只打印单个表格，因此您可以选择插入一个特殊的 div，强制在每两个表格之后分页。

因此，您可以包含

并在屏幕上隐藏它，但在打印时显示它。您可以为其指定 page-break-after:always; 样式。这样，每页至少可以获得两个表格。

另一个建议是让用户决定是否要每页打印一个表格或打印尽可能多的表格（有些表格可能会被拆分到页面上）。您可以切换复选框以将page-break-after:always;样式添加到表格中。

Answer 3

要解决这个问题，只需使
#table{page-break-after:auto;}

Answer 4

这是一个非常老的问题，所以只想更新里面的分页符：避免；现在大多数主流浏览器都支持。尽管确保 page-break-xxx 工作有一些怪癖（任何级别的父级都不能有position:fixed，元素和直接父级需要是position:relative和display:block等）。

参考：
https://developer.mozilla.org/en- US/docs/Web/CSS/page-break-inside

https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside

Answer 5

并非所有打印机都是一样的。

您遇到问题是因为打印机不受 Web 浏览器或 html 代码控制。它由打印机附带的打印机驱动程序控制。此功能（及其设置）属于渲染页面的计算机的所有者，而不是您。

您的代码无法提前知道连接到用户系统的打印机可以在一页上打印多少行，或者打印机将如何布局表格。如果使用不同打印机的用户打开页面将会有所不同。就像不同的屏幕分辨率一样，打印机像素分辨率也不同。

因此，适用于不同屏幕的所有规则（及其缺点）也适用于不同的打印机。您不仅无法知道打印机将在何处断页，甚至无法知道打印的页面有多大，即页面上可以容纳多少内容。

要将所有表格（或多个表格）打印到一页上，用户应选择要打印的部分，然后使用打印机对话框中的打印选择。