Print html table with custom header on subsequent pages

Question

When there is a html with a table and you want to print it, the table may or may not split depending on how long the table is. If it splits there is a way to repeat the header of the table, to do that you can add:

thead {
  display: header-table-group;
}

What I want to do is to skip the first page, so the header will only show on subsequent pages.

Is there a way to do this?

Answer 1

If your <thead> has a fixed height, then it's pretty easy to hide it on the first page. All you have to do is nest the table in a div with overflow: hidden;, and then add a negative top margin to the table to hide its header.

Example:

<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>

Note that the header will only show on subsequent pages in browsers that support repeating table headers, which doesn't include Chrome, Safari, or Opera.