打印时防止表格中的分页符

Posted 2023-03-05

【中文标题】打印时防止表格中的分页符

【英文标题】：Preventing Page Breaks in a Table When Printing

【发布时间】：2011-08-22 20:19:33

【问题描述】：

我有一个要设置打印的页面。此页面包含大量单独的表。这些表格大小不一，但一般来说，我可以在每页上放置 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 的东西将是一个非常好的奖励。

有什么想法吗？

【问题讨论】：

你能用一些 javascript 吗？

@McGlone：如果您仍在使用 w3schools 作为参考，请查看developer.mozilla.org。这是一个更详细、更全面的万维网参考资料。

【参考方案1】：

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

这将为您提供您正在寻找的大致内容，但它不会是完美的。每隔一段时间，您就会有一个“可能”适合上一页的表格，但只是没有完全达到临界点，因为您必须在估计有多少行适合一页时处于低位.

但是，我还没有找到一种方法来确定单元格内的内容或类似内容在打印输出页面时是否会换行。

希望能激发你的灵感。

【讨论】：

我同意这种方法，但是跨浏览器支持非常困难。我目前正在做这样的事情，但因为我支持 IE、Safari、Firefox 和 Chrome，我发现我需要采取中间的行数，这在任何浏览器中看起来都不是很好，但适合我的方式需要它。奇怪的是，至少在 Windows 上，这是 IE 大放异彩的地方。

【参考方案2】：

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

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

因此，您将包含 <div class="pageBreak"></div> 并将其隐藏以显示在屏幕上，但将其显示以进行打印。你会给它一个page-break-after: always;的风格。这样一来，每页至少有两个表格。

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

【参考方案3】：

要解决这个问题，只需制作 #tablepage-break-after:auto;

【参考方案4】：

这是一个非常古老的问题，所以只想更新 page-break-inside: Avoid;现在大多数主流浏览器都支持。虽然确保 page-break-xxx 工作有一些怪癖（任何级别的父级都不能有位置：固定，元素和直接父级需要是位置：相对和显示：块等）。

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

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

【参考方案5】：

并非所有打印机都是平等创建的。

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

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

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

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

【讨论】：

这根本不是真的。浏览器输出一个发送到打印机的 postscript 文件。生成 ps 文件时，浏览器会选择如何布局页面。唯一的怪癖是页边距——一些打印机不能或不会在页面的某些区域打印。

-1 问题本身有一个例子。显然它只在 Opera 中实现，但至少它表明你可以从浏览器中获得一些控制。

-1 用于吐出完全笨拙的垃圾。你从哪里得到这些东西？