打印表格时，chrome 和 safari 将一行切成两半答案

【问题标题】：When printing a table, chrome and safari are cutting a row in half打印表格时，chrome 和 safari 将一行切成两半
【发布时间】：2013-02-25 10:12:21
【问题描述】：

IE9、Firefox 和 Opera 没有这个问题。只有 Chrome 和 Safari。

当打印一个页面时，如果有一个表格需要在某个时刻被打破才能继续到下一页，Safari 和 Chrome 会将该行切成两半并在第一页打印上半部分和下半部分在第二页。

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

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

我有 7 页，其中行数不等，平均在 10-15 行左右。我该怎么做才能解决这个问题？

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

【问题讨论】：

这已经被广泛讨论了：stackoverflow.com/questions/2045470/page-break-inside-avoid 只是一个例子。
是的，但是一直没有针对webkit浏览器的解决方案
我希望有这个问题的答案。
你能发布更多代码吗？

标签： css printing tablerow

【解决方案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 中的回答，看看它是如何完成的。