How to prepare HTML for print having different headers - html

Question

I am trying to do a module where I list orders between dates.
I have set the needed parameters in CSS like this:
#page {
size: A4;
}
#media print {
html, body {
width: 210mm;
height: 297mm;
}
...
}
As header, each page should display the name of the buyer and the order number. I have managed to do this using a DIV having page-break-after: always CSS code after each order. This way each order begins on a new page.
The problem is that when I have too much items in the order and the orders are listed on more then one page. In this case on the second page I don't have the header displayed and I need it.
I have tried to use a div with css attributes like: top:0; position: fixed; but every single header gets displayed on all the pages, which is not good.
UPDATE:
I need the header of the actual order each page of the order. So if I have i.e. 40 items in an order (which does not fit into one page) then I need the header of this order listed on both of its pages.
This is how it works with position:fixed:

Answer 1

After hours of different unsuccessful tries (1. using exact width font like Courier New and calculating the height of each item, 2. using javascript, jquery to see if the bottom of each item exceeds the limit of space for a page, I've put pagebreak, etc...) I have found the best solutions for this here .
If you use
thead {display: table-header-group; }
the header is displayed on each printed page's header. The same is true for tfoot:
tfoot {display: table-footer-group; }