html - 在后续页面上打印带有自定义标题的 html 表格

Question

当有一个带有表格的 html 并且您想要打印它时，表格可能会或可能不会拆分，具体取决于表格的长度。如果它拆分，有一种方法可以重复表的标题，为此您可以添加:

thead {
  display: header-table-group;
}

我想做的是跳过第一页，这样标题只会显示在后续页面上。

有办法吗？

Answer 1

如果您的 <thead>有一个固定的高度，那么很容易把它隐藏在第一页。您所要做的就是将表格嵌套在 div 中。与 overflow: hidden; , 然后向表格添加负的上边距以隐藏其标题。

例子:

<style>
  .headless {
    overflow: hidden;
    line-height: 20px;
  }
  .headless > table {
    margin-top: -22px;
    border-spacing: 0;
  }
  .headless > table > * > tr > * {
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    padding: 0 4px 0 4px;
  }
  .headless > table > * > tr > :first-child {border-left: 2px solid black;}
  .headless > table > thead > :first-child > th {border-top: 2px solid black;}
</style>

<div class="headless">
  <table>
    <thead>
      <tr>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
      </tr>
      <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
      </tr>
    </tbody>
  </table>
</div>

请注意，标题只会显示在支持重复表格标题的浏览器的后续页面上，不包括 Chrome、Safari 或 Opera。