Question

我必须使用谷歌浏览器在每个页面上打印带有标题的非常大的表格，因为我用它将我的主表分成小表并在它们之间放置分页符（我试图使用只有 CSS ，例如thead {display: table-header-group;}或position: fixed，但 Chrome 不接受它，因此拆分表是唯一适用于我的解决方案）

除了一些获得随机高度的行/单元格外，一切顺利，我尝试更改 CSS 来解决此问题，但是当我更改单元格边距或单元格填充我只是更改了改变其高度的行。

我的 HTML 如下所示：

<table>
  <!-- my table content -->
</table>
  <div style="page-break-before: always;page-break-inside: avoid;"></div>
<table>
  <!-- my table content -->
</table>

Answer 1

到目前为止，

This 是处理我知道的多页表打印的最简单，最可靠的方法。但是，如果您只想控制表的行高，可以使用CSS来实现。下面的CSS将确保影响行高的唯一因素是1）单元格内容的高度，以及2）水平单元格边框的厚度（我假设没有任何其他CSS或相关您尚未告诉我们的HTML属性）：

<style>
table {
  border-collapse: collapse;
  /*^^^ merges adjacent cell and table borders (so table height != sum of row heights!)*/
  border-spacing: 0 0; /*removes space between cells*/
  -webkit-border-vertical-spacing: 0;
  /*^^^ removes Chrome's border-spacing (sort of redundant with border-spacing: 0 0;)*/
}
table > thead {
  vertical-align: bottom;
  /*^^^ affects the height of rows that get broken by page breaks*/
}
table > tbody {
  vertical-align: top;
  /*^^^ affects the height of rows that get broken by page breaks*/
}
table > * > * > td,
table > * > * > th {
  border: 1px solid black;
  padding-top: 0; /*cancels out browser's default cell padding*/
  padding-bottom: 0; /*cancels out browser's default cell padding*/
}
</style>

但这并不一定会阻止您的最后一行被分页符拆分。如果您正在尝试预测可以挤到页面上的行数，那么您应该放弃这种方法，原因如下：

您无法控制纸张尺寸。
您无法控制纸张方向。
您无法可靠地控制边距大小。
打印渲染在不同的浏览器中的工作方式不同，因此适合在Firefox或IE中的一个页面上的内容可能需要Chrome中的两个页面。

如果确实想要解决这些问题，您应该考虑使用我在本文顶部链接的解决方案。

当打印页表行/单元格获得随机高度时

1 个答案: