Header hidden when <table> spills over to multiple pages for PDF and table heading gone

Question

I am working on a PDF layout/template for creating Invoices but I am having some annoying issues when the PDF becomes multi-paged.

The PDF layout is like:

----------------------------------
|     PDF Print Page Header      |
----------------------------------
| Logo    |     Receiver address |
----------------------------------
| Header details                 |
----------------------------------
|                                |
|          Items table           |
|                                |
----------------------------------
|     PDF Print Page Footer      |
----------------------------------

The problem I am facing is that on pages 2, and forward, the PDF Print Page Header becomes "invisible" behind the Items table and also the "heading" of the Items table is not printed on each page using Puppeteer and Chromium headless.

The Footer is working as expected and is added to each page.

I add the Header and Footer to the "Page" in chromium.puppeteer:

const pdf = await page.pdf({
    format: 'A4',
    margin: {
      top: '100px', // <-- margins here are completely ignored
      bottom: '70px',
    },
    printBackground: true,
    displayHeaderFooter: true,
    preferCSSPageSize: true,
    headerTemplate: header, // <-- this is header HTML incl. CSS
    footerTemplate: footer, // <-- this is footer HTML incl. CSS
    landscape: false
  });

By searching text that I have put into the header I can find it on each page, so the header is added and as you can see so is the footer:

Also, printing the same in Chrome Browser the table "heading" is there so my HTML has it added:

I think the problem is that Puppeteer doesn't really take any CSS (or page margins) into account for the beginning of next page (although the footer is working as it should)...

If I add a margin to the top in CSS:

@page {
  size: A4 portrait;
  margin: 10mm 0 50mm 0; /* <-- 50mm here is ignored */
}

This "pushes down" the table on page 2 so header is visible (still no table column headers though) but then the footer is covered instead... so, catch 22...

So, question is, how can I get the "table" ('s) on page 2, and onwards, to limit the height of them?

EDIT: The table column headers are added when I changed the await page.emulateMediaType('print'); to print from screen! The issue with either footer or header being "hidden" remains though...