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

Posted 2023-03-06

【中文标题】在后续页面上打印带有自定义标题的 html 表格

【英文标题】：Print html table with custom header on subsequent pages

【发布时间】：2012-09-03 16:42:40

【问题描述】：

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

thead 
  display: header-table-group;

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

有没有办法做到这一点？

【问题讨论】：

thead:first-child 有用吗？还是表格实际上在标签上拆分（即 ..... ....） 我不知道它是如何分裂的，因为这是浏览器所做的事情，它不允许我检查。我会试一试并回复遗憾的是它不起作用，但这是一种合理的方法。谢谢

【参考方案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。