Как подготовить HTML для печати с разными заголовками

Question

Я пытаюсь сделать модуль, в котором я перечисляю заказы между датами. я установить необходимые параметры в CSS, как это:

@page { 
    size: A4; 
} 
@media print { 
    html, body { 
    width: 210mm; 
    height: 297mm; 
    } 
... 
} 

В заголовке, каждая страница должна отображать имя покупателя и номер заказа. Мне удалось сделать это, используя DIV с кодом page-break-after: always CSS после каждого заказа. Таким образом, каждый заказ начинается с новой страницы.

Проблема в том, что когда у меня слишком много предметов в заказе и заказы перечислены на более чем одной странице. В этом случае на второй странице у меня нет отображаемого заголовка, и мне это нужно.

Я попытался использовать div с атрибутами css, такими как: top:0; position: fixed;, но каждый заголовок отображается на всех страницах, что не очень хорошо.

ОБНОВЛЕНИЕ: Мне нужен заголовок фактического заказа на каждую страницу заказа. Поэтому, если у меня есть 40 элементов в заказе (который не помещается на одну страницу), тогда мне нужен заголовок этого порядка, указанный на обеих его страницах. Это, как он работает с позицией: фиксированная:

Answer 1

После нескольких часов различных неудачных попыток (1. с использованием точной шириной шрифта, как Courier New и счетные высоту каждого элемента, 2. с помощью JavaScript, JQuery, чтобы увидеть, если нижняя часть каждого элемента превышает предел пространства для страницы, я поставил разметку страницы и т. д.). Я нашел лучшие решения для этого here. Если вы используете

thead {display: table-header-group; }

заголовок отображается на заголовке каждой напечатанной страницы. То же самое верно для tfoot:

tfoot {display: table-footer-group; }