html - 後続のページにカスタム ヘッダーを含む html テーブルを印刷する

Question

テーブルを含む html があり、それを印刷したい場合、テーブルの長さによってテーブルが分割される場合と分割されない場合があります。分割された場合、テーブルのヘッダーを繰り返す方法があります。そのためには、次を追加できます。

thead {
  display: header-table-group;
}

私がやりたいことは、最初のページをスキップして、ヘッダーが後続のページにのみ表示されるようにすることです。

これを行う方法はありますか？

Answer 1

高さが固定されている場合<thead>、最初のページで非表示にするのは非常に簡単です。divテーブルをwithにネストし、テーブルに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 を含まない繰り返しテーブル ヘッダーをサポートするブラウザーの後続のページにのみ表示されることに注意してください。