Question

我对IE9，Firefox和Opera没有这个问题。只需Chrome和Safari。

打印页面时，如果某个桌面需要在某个时刻断开以继续下一页，Safari和Chrome会将该行缩小一半并在第一页和下半部分打印上半部分在第二页。

以下是我尝试使用的代码，它解决了我在IE9中遇到的问题 - 在下一页的每一行打印一个小的50px x 50px图像，并在第一页上显示文字。

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }

我有7页不同行数，平均大约10-15行。我该怎么做才能解决这个问题？

我使用PHP foreach从数组创建表，所以我宁愿不必编辑该代码，这样我就可以在页面之间保持一致。

Answer 1

这是一个只允许行间分页的表的示例。它应该适用于任何流行的桌面浏览器，包括基于webkit的浏览器......

<style>
  table {
    border-spacing: 0;
    line-height: 1.25em;
  }
  table > tbody > tr > td {padding: 0;}
  table > tbody > tr:first-child > td > div {border-top: 2px solid black;}
  table > tbody > tr > td:first-child > div {border-left: 2px solid black;}
  table > tbody > tr > td > div {
    page-break-inside: avoid;
    display: inline-block;
    vertical-align: top;
    height: 3.75em;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
  }
</style>

<table>
  <tr>
    <td><div>Content</div></td>
    <td><div>Multi-<br/>line<br/>content</div></td>
  </tr>
  <tr>
    <td><div>Content</div></td>
    <td><div>Multi-<br/>line<br/>content</div></td>
  </tr>
</table>

不幸的是，它需要在单元格内容上固定高度，这可能会使大多数遇到此帖子的人无法使用。

可以在不设置固定内容高度的情况下将其关闭，但这种方法非常复杂。在this post中查看我的答案，看看它是如何完成的。

Answer 2

查看这些错误报告 Webkit Bug report

Webkit newer Bug report referencing to the one above.

打印桌子时，铬和野生动物园正在减少一半

2 个答案: