1

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

我已经制作了 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我还不敢尝试
4

1 回答 1

1

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

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

于 2014-09-09T07:04:39.320 回答