分页时打印 Html 表格行的问题

Question

我有一个包含大量行的表格，在打印过程中可以跨越多个页面。我在让表格在分页符时正确呈现时遇到了一些问题。

第一个问题是我在每一页上都重复了我的标题，但有时它会打印到上一页的最后一行，有时只是覆盖最后一个数据行。

我遇到的另一个问题是我将页面上的顶部和底部边距设置为 1 厘米，但行在边距下方消失。因此，如果我将上一页的最后一行作为第 18 行，我将在下一页获得第 21 行。第 19 行和第 20 行消失在页边空白下方。 这是 css 的边距：

  @page {
      size: auto;
      margin: 1cm 0;
  }
  @page:first {
    margin: 0;
  }

如果我不使用@page:first，那么关于行在边距下方消失的第二个问题得到修复，但我不需要第一页上的边距。

这是与我的表相关的 css：

 table { page-break-after:auto }
  tr    { page-break-inside:avoid; page-break-after:auto;}
  td    { page-break-inside:avoid; page-break-after:auto; }
  thead { display:table-header-group }

我正在为此使用 chrome。

Answer 1

尝试将border-collapse: collapse; 添加到<table>。无论出于何种原因为我工作。