Print repeatable multiple header in HTML

Asked Dec 12 '17 at 23:54

Active Dec 13 '17 at 00:42

Viewed 320 times

So my problem has already been said in the title, I am trying to print a very long table with my header repeated on each page. The behaviour is there when I have 1 header with 1 row. But, what I'm currently having is either 1 of these 2 cases:

Multiple headers (multiple thead)
1 header but with multiple rows

Both of the case seems to result in the header not being repeatable. Can anyone show me any workaround this?

-- EDIT 2 --

Some test cases:

Firefox 57: Sometimes work, sometimes doesn't with 2 rows at most
Chrome 62: Works with 2 rows header/ 2 headers, not working with 3

-- EDIT 1 --

My HTML code is quite simple and nothing much

<table>
    <thead>
        <tr></tr>
        <tr></tr>
    </thead>
    <tbody></tbody>
</table>

<table>
    <thead>
        <tr></tr>
    </thead>
    <thead>
        <tr></tr>
    </thead>
    <tbody></tbody>
</table>

I'm currently using bootstrap css so it has already set style @print for my thead.

edited Dec 13 '17 at 00:42

asked Dec 12 '17 at 23:54

Tri Nguyen

2

What exactly do you mean by `print`? Can you show the relevant part of your code? – PM 77-1 Dec 12 '17 at 23:56
@PM77-1 `print` as printing the whole page. I have edited to add my code but it's not really something big – Tri Nguyen Dec 13 '17 at 00:00
Printing by what means? Just a `print` function of your browser? – PM 77-1 Dec 13 '17 at 00:04
@PM77-1 yes. Just normal printing – Tri Nguyen Dec 13 '17 at 00:05
Explore `@media print` or https://stackoverflow.com/questions/274149/repeat-table-headers-in-print-mode – PM 77-1 Dec 13 '17 at 00:14
@PM77-1 that's already been set through bootstrap, so no extra code need to be set – Tri Nguyen Dec 13 '17 at 00:17
Your example does not show you using Bootstrap. – PM 77-1 Dec 13 '17 at 00:18
@PM77-1 I did say below my code that I'm using bootstrap css – Tri Nguyen Dec 13 '17 at 00:20
@PM77-1 is pointing out that your example does NOT have bootstrap. See https://stackoverflow.com/help/mcve for how to give good reproduction examples. – dgrogan Dec 13 '17 at 00:33
Also mention which browsers you have tried that exhibit the problem. – dgrogan Dec 13 '17 at 00:33
@dgrogan since bootstrap `@media print` set the style to thead, and tbody directly without adding extra class, I don't feel the need of adding anything inside my code? – Tri Nguyen Dec 13 '17 at 00:40
@dgrogan I have added some browser that I have tried – Tri Nguyen Dec 13 '17 at 00:42

Print repeatable multiple header in HTML

0 Answers0