Question

我有一个在网页上可以正常使用的表格，但是在打印我的表格时（ ctrl + p ），它不是我想要的方式。第一页的最后一行与第一页上的行部分和第二页上的行的另一部分分开。那么，有没有办法克服这个问题，行可以有不同的内容和大小。我也试过这个属性

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

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

enter image description here

表，TH，TD { 边框：1px纯黑色; 边界崩溃：崩溃; } 日，TD { 填充：5像素; }

</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>

Answer 1

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

tr {page-break-inside: avoid;}

不幸的是，这在其他流行的浏览器中无法使用，例如Chrome。

正如所建议的那样，您可以通过将其包装在具有＆＃34; page-break-inside的div中来防止单个单元格内容中的分页符：避免;＆＃34;设置它，但如果内容高度在行内变化，你仍然会在两个不同页面上的行的部分结束。

如果你真的想要解决这个问题，并且愿意抛出一些javascript，I have posted a solution here就可以了。

Answer 2

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

CSS 属性page-break-before:always只能应用于块元素。不是内嵌，或者像表格行或列表项之类的奇怪内容。因此，不要设置行或单元格的样式，甚至不要<tbody>或<br/>。并且它不能是允许浏览器省略的元素，因此您不能只使用其上的样式引入空<div>。例如，必须在第一个单元格内容周围添加<div>或<p>以提供样式。

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

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

由于它是默认样式，添加它无效。浏览器已经尽可能地避免破坏你的表。但是如果没有轻易删除它会使其他选项变得毫无用处，尤其是在Chrome中。

表行分为两页（打印介质）

2 个答案: