表格行分成两页（打印介质）

Question

表格行分成两页（打印介质）

nat*_*lie 5 html css printing printing-web-page

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

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

Run Code Online (Sandbox Code Playgroud)

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

在此处输入图片说明

table,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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jon*_*ark 0

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

CSS属性page-break-before:always只能应用于块元素。不是inline，也不是任何奇怪的东西，比如table-row或list-item。因此，不要设置行或单元格的样式，甚至不要设置 a<tbody>或 a 的样式<br/>。而且它不能是浏览器允许省略的元素，所以你不能只扔一个带有<div>样式的空元素。例如，必须在第一个单元格内容周围添加<div>或来指定样式。<p>

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

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

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

归档时间：	11 年，5 月前
查看次数：	9793 次
最近记录：	9 年，8 月前