0

我有一个包含 DIV 的页面。此 div 是其他元素的容器，并且在打印时可以增加的高度大于页面的高度。

我认为它会毫无问题地分页。我看到的问题是 DIV 的高度增加到第 1 页的全高，就是这样。打印输出的第 1 页之外不再显示任何内容。

经过一番试验，我发现display: inline似乎可以解决问题。我不懂为什么。

如果这确实是问题的解决方案，有人可以解释为什么这可以解决我的问题。

我想了解这样做的原因。

4

1 回答 1

1

@您的评论：您在正确的时间提出正确的问题，因为我目前的工作完全相同！:) 我会分享一些截图来展示结果；我认为打印一个非常大的表格需要一个非常复杂的解决方案，但是对于我的表格来说它是有效的（我称之为“中等”）。

在我的应用程序中，容器 div 中有一个表，块元素的显示设置为 table-cell（使用浮动和边距时列宽不一致）。

1.普通webview中的页面

普通 webview 中的页面

2.在样式表中放置打印媒体查询后的页面，打印中：（不要介意黑暗的 div，它是我尚未删除的掩码）正如您所见，表格跨越多个页面并水平缩放适合。

@media print {
#data {overflow: visible; height: auto;} /* the container div */
.bld {display: block} /* the blocks you see in the table, web display: table-cell */
/* I tested all table{ display: inline, inline-table, and table } and they 
all worked for me, as displayed in the screenshot below */
}

打印中的页面

3.要设置分页符以打印到某个div（可能是行），我会向您推荐这篇文章，因为我自己还没有尝试过，但可能值得一读： Make divs on a page print on separate打印时的页数

另一个技巧是在 x 行的第一列内的某个位置放置一个 div，然后设置这个 div 的 CSSpage-break-after: always;以强制在这些行上分页。我在 tr's、td's 和 table 上测试了一些分页符，但它没有用（因为 tr's 的样式与其他 HTML 元素有些不同）

4.作为表格不同显示值差异的参考： https ://stackoverflow.com/questions/15130285/css-differences-between-style-display-inline-inline-table-and-table

我也将阅读此内容，如果您发现与此主题相关的其他有趣内容，请在评论中给我发@@，谢谢！

于 2013-05-17T18:56:16.773 回答