How to repeat a TALL table header on each page in Chrome?

Question

First time poster =)

I'm printing a long table and want to repeat the table header on each page. I'm not having a problem until the height of the <thead> gets to a certain height - in Chrome 87.0.4280.88 it appears to be 242px with default margins. At 242px high or more, the header only prints once on the first page. Shrinking the page margins when printing does give me some more room to play with, but is there any workaround to this so I can print a taller <thead> on every page without adjusting the margins? I can't seem to find any documentation on this, I'm quite stumped.

<table>
  <thead>
    <th style='height: 242px'>if this was 241px it would print on every page</th>
  </thead>
  <tbody>
    <tr><td>anything</td></tr> <!-- do this 100 times, or enough it goes to multiple pages -->
  </tbody>
</table>

Thanks in advance!

Milewski

Answer 1

One way to do it only using CSS would be to add these styles to target your table:

<style>
  thead {
    position: fixed;
    top: 0;
  }

  thead th {
    height: 380px;
  }

  tbody tr:nth-child(25n + 1) td {
    padding-top: 380px;
  }

  tbody tr:nth-child(25n + 26) {
    page-break-before: always;
    break-before: always;
  }
</style>

It positions thead to be fixed so it appears on every page, then adds a top padding to every 25th td in tbody equal to thead height, and adds a break-before property on every 25th tr, except the first one.

You can adjust the nth-child selectors to properly match the height of your content rows so it breaks the page properly.

Wohlert

Answer 2

The problem could come mainly from the browser and how it treats your website. The solutions that occur to me would be to create several identical headers so that on each page you use a different one even if they are identical.

<table>
    <thead>
        <tr><th style='height: 242px'>Header 1</th></tr>
        <tr><th style='height: 242px'>Header 2</th></tr>
    </thead>
    <tbody>
        <tr><td>anything</td></tr>
    </tbody>
</table>

The other option but would include php would be to create an include which you create a single header.html and call it on each page. If you are interested in this option, ask for it and I will show you an example

Hartshorn

Answer 3

 <table id="header-table">
  <thead>
    <th style='height: 242px'>Tall header</th>
  </thead>
</table>

<table id="main-table">
  <tbody>
    <tr><td>anything</td></tr> <!do this as many times as you want -->
  </tbody>
</table>

you can use the above method by seprating the header also, you can use javascript libraries such as jsPDF or printJS for repetitive process and add CSS in the file

Hereby