DIV没有打印分页

Question

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

我认为它会没有任何问题地分页。我看到的问题是DIV的高度增加到第1页的整个高度，那就是它。打印输出的第1页外不再显示。

经过一些实验，我发现display: inline似乎可以解决问题。我不明白为什么。

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

我想了解其原因。

Answer 1

@your comment：你在正确的时间提出正确的问题，因为我目前的工作方式完全相同！ :)我将分享一些截图来显示结果;我认为打印一个非常大的表需要一个非常复杂的解决方案，但对于我的表它可以工作（我称之为“中等”）。

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

1.普通网页浏览中的页面

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 seperate pages when printed

另一个hack是将div放在第x行第一列的某个位置，然后将此div设置为CSS page-break-after: always;以强制对这些行进行分页。我在tr，td和表上测试了一些分页内容，但它没有用（因为tr的样式与其他HTML元素有些不同）

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

我也会读到这篇文章，如果你发现其他一些与这个话题有关的内容，请在评论中给我发一个@，谢谢！