Geek asks and answers

Printing an html table with a custom header on the following pages

When there is html with a table and you want to print it, the table may or may not be split depending on how long the table is. If it breaks, there is a way to repeat the table title to do this:

thead {
  display: header-table-group;
}

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

Is there any way to do this?

+5
source share
1 answer

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

+1

More articles:


All Articles