css - 如何在不同浏览器中打印多页 HTML 表格

Question

打印 HTML 表格的最佳做法是什么，该表格包含的单元格高度约为 5 厘米，不应被分成不同的页面。

我已经制作了 print.css 并定义了

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }

但是:

• 在 Chrome 中，HTML 页面中的图片被分割成多个页面
• 在 Firefox 中，第一页是空的，表格从第二页开始，表格的其余部分被切掉(第 3 页再次为空)
• IE我还没敢试

Answer 1

浏览器对分页符 CSS 属性的支持参差不齐，尤其是在表格部分。如果你想防止单元格内容中的分页符，我建议将内容嵌套在一个div中，并设置“page-break-inside: avoid;”在分区上。如果你需要支持根本没有实现 page-break-inside 属性的旧浏览器，你还应该设置“display: inline-block; vertical-align: top;”在 div 上。

此外，请注意，如果可打印区域的高度(即页面高度减去顶部和底部边距)小于单元格内容的高度，那么浏览器不可能避免破坏它，除非它可以以某种方式扭曲空间结构(也许 Firefox 有一个“-moz-”属性？)。