表格行拆分为两页（打印介质）答案

【问题标题】：Table row splits across two pages (print media)表格行拆分为两页（打印介质）
【发布时间】：2014-08-12 14:10:41
【问题描述】：

我有一个在网页中可以使用的表格，但是在打印我的表格 (ctrl+p) 时，它不会按照我想要的方式破坏。第一页的最后一行与第一页上的行的一部分和第二页上的行的另一部分分开。那么，有什么办法可以解决这个问题，行可以有不同的内容和大小。我也试过这个属性

 page-break-before/after: auto. page-break-inside:avoid;

但没有结果。有没有办法打破表格并将表格的一部分移动到下一页而不将最后一行分成两部分用于打印媒体？任何帮助将不胜感激。

表,th,td { 边框：1px纯黑色；边框折叠：折叠； } th,td { 填充：5px； }

</style>
</head>
<body>
<table style="width:100%;">
<tr>
  <th><span>Firstname</span></th>
  <th><span>Lastname</span></th>      
  <th><span>Points</span></th>
</tr>
<tr>
  <td><span>Jill</span></td>
  <td><span>Smith</span></td>     
  <td><span>50</span></td>
</tr>
<tr>
  <td><span>Eve</span></td>
  <td><span>Jackson</span></td>       
  <td><span>94</span></td>
</tr>
<tr>
  <td><span>John</span></td>
  <td><span>Doe</span></td>       
  <td><span>80</span></td>
</tr>
   /*here I have many <tr> elements*/
</table>

</body>
</html>

【问题讨论】：

标签： html css printing printing-web-page

【解决方案1】：

如果我理解正确，您希望您的表格只在行之间而不是在行内中断。您可以使用以下 css 规则在 Firefox 和 Internet Explorer 中完成此操作：

tr {page-break-inside: avoid;}

很遗憾，这在其他流行的浏览器（例如 Chrome）中不起作用。

正如建议的那样，您可以通过将单个单元格的内容包装在具有“page-break-inside：避免；”的 div 中来防止在单个单元格的内容中出现分页符。设置它，但如果行内的内容高度不同，您仍然会在两个不同的页面上看到该行的部分内容。

如果您真的想解决这个问题并愿意投入一些 javascript，I have posted a solution here 应该可以解决问题。

【讨论】：

@delphirules 如果您想要一个适用于 Chrome、Safari 和 Opera 等 Webkit 浏览器的解决方案，请查看我帖子底部的链接。

【解决方案2】：

您可以请求分页符，这将在屏幕上不可见，但会在您打印时强制元素进入新页面。但规则比你想象的要微妙。

CSS 属性 page-break-before:always 只能应用于 block 元素。不是 inline，也不是像 table-row 或 list-item 这样的奇怪东西。所以不要设置行或单元格的样式，甚至不要设置<tbody> 或<br/>。它不能是浏览器允许省略的元素，所以你不能只扔一个空的<div>，上面有样式。例如，必须在第一个单元格内容周围添加 <div> 或 <p> 以赋予样式。

同样page-break-after:always 可以应用于前一行末尾的类似内容。我觉得这很烦人，因为我一直想要保护的是一行或一组。

某些浏览器可能还希望您将表格样式更改为page-break-inside:auto，因为表格的默认样式通常已经是page-break-before:avoid。

由于它是默认样式，添加它并没有帮助。浏览器已经尽可能地避免破坏您的表格。但如果不轻易删除它，其他选项将毫无用处，尤其是在 Chrome 中。

【讨论】：