Is it possible in CSS using a property inside an @page to say that table headers (th) should be repeated on every page if the table spreads over multiple pages?
Asked
Active
Viewed 2e+01k times
131
Andrew Truckle
- 17,769
- 16
- 66
- 164
avernet
- 30,895
- 44
- 126
- 163
6 Answers
145
Andrew Truckle
- 17,769
- 16
- 66
- 164
tvanfosson
- 524,688
- 99
- 697
- 795
-
2I have successfully used that in Firefox. – jishi Nov 08 '08 at 02:17
-
10These comments are quite old. As of 3/13/13 lazy spot checking shows it works in latest IE10, and even venerable IE8... – Nathan Mar 14 '13 at 01:07
-
1..but not Chrome. (see next answer) Looking at the issue tracker, it looks like there is some traction on this finally. – Daniel Jun 17 '16 at 15:25
-
10Chrome finally supports repeated table headers for print media. This is enabled if the th has `break-inside:avoid`, and can be disabled with `break:inside: auto`. See https://codereview.chromium.org/2021703002/#ps20001 – Alex Osborn Oct 20 '16 at 05:28
-
**for more explanation and walk through**. [here](https://stackoverflow.com/a/51371081/4846859) – Biskrem Muhammad Jul 16 '18 at 22:57
-
1@tvanfosson Its working completely fine but is there any limitation of height of header for which repeating header should work? In my case, it stops working when header height is bigger. – Rushabh Shah Feb 13 '19 at 13:23
-
Works like a charm for server side PDF rendering using puppeteer (which opens a headless chrome page and uses the chrome print to pdf feature). – brickBreaker Mar 07 '19 at 21:15
-
content overlaps with repeated th – Sashi yadav May 14 '19 at 10:05
-
safari not support??any solution – tao wang Jun 18 '21 at 01:21
85
Some browsers repeat the thead element on each page, as they are supposed to. Others need some help: Add this to your CSS:
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
Opera 7.5 and IE 5 won't repeat headers no matter what you try.
(source)
Farshid Rezaei
- 751
- 2
- 10
- 34
nickf
- 537,072
- 198
- 649
- 721
-
1Neither does Flying Saucer, which I am using to generate a PDF. I will also ask this question on the Flying Saucer mailing list to see if there is another way to do this. – avernet Nov 08 '08 at 02:04
-
2mother of god, at the time this was written IE5 was still something? – igorsantos07 Oct 05 '16 at 23:51
-
I have just tried the `thead` example in my CSS (IE7 compatible) and it does repeat the headings when I do a print preview. Thank you. But, I see to get a replicated row at the top of the next page. Why? – Andrew Truckle Mar 29 '17 at 17:23
51
Flying Saucer xhtmlrenderer repeats the THEAD on every page of PDF output, if you add the following to your CSS:
table {
-fs-table-paginate: paginate;
}
(It works at least since the R8 release.)
Eero
- 4,704
- 4
- 37
- 40
46
UPDATE: It looks like this may have been fixed in 2016! https://bugs.chromium.org/p/chromium/issues/detail?id=24826#c45
Original Answer (2012): Before you implement this solution it's important to know that Webkit currently doesn't do this.
Here is the relevant issue on the Chrome issue tracker: http://code.google.com/p/chromium/issues/detail?id=24826
And on the Webkit issue tracker: https://bugs.webkit.org/show_bug.cgi?id=17205
Star it on the Chrome issue tracker if you want to show that it is important to you (I did).
Nick Knowlson
- 7,185
- 6
- 47
- 63
11
Chrome and Opera browsers do not support thead {display: table-header-group;} but rest of others support properly..
GoldBishop
- 2,820
- 4
- 47
- 82
SantoshK
- 1,789
- 16
- 24
7
how do i print HTML table. Header and footer on each page
Also Work in Webkit Browsers
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function PrintPage() {
document.getElementById('print').style.display = 'none';
window.resizeTo(960, 600);
document.URL = "";
window.location.href = "";
window.print();
}
</script>
<style type="text/css" media="print">
@page
{
size: auto; /* auto is the initial value */
margin: 2mm 4mm 0mm 0mm; /* this affects the margin in the printer settings */
}
thead
{
display: table-header-group;
}
tfoot
{
display: table-footer-group;
}
</style>
<style type="text/css" media="screen">
thead
{
display: block;
}
tfoot
{
display: block;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width: 500px; margin: 0 auto;">
<thead>
<tr>
<td>
header comes here for each page
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
</tr>
<tr>
<td>
2
</td>
</tr>
<tr>
<td>
3
</td>
</tr>
<tr>
<td>
4
</td>
</tr>
<tr>
<td>
5
</td>
</tr>
<tr>
<td>
6
</td>
</tr>
<tr>
<td>
7
</td>
</tr>
<tr>
<td>
8
</td>
</tr>
<tr>
<td>
9
</td>
</tr>
<tr>
<td>
10
</td>
</tr>
<tr>
<td>
11
</td>
</tr>
<tr>
<td>
12
</td>
</tr>
<tr>
<td>
13
</td>
</tr>
<tr>
<td>
14
</td>
</tr>
<tr>
<td>
15
</td>
</tr>
<tr>
<td>
16
</td>
</tr>
<tr>
<td>
17
</td>
</tr>
<tr>
<td>
18
</td>
</tr>
<tr>
<td>
19
</td>
</tr>
<tr>
<td>
20
</td>
</tr>
<tr>
<td>
21
</td>
</tr>
<tr>
<td>
22
</td>
</tr>
<tr>
<td>
23
</td>
</tr>
<tr>
<td>
24
</td>
</tr>
<tr>
<td>
25
</td>
</tr>
<tr>
<td>
26
</td>
</tr>
<tr>
<td>
27
</td>
</tr>
<tr>
<td>
28
</td>
</tr>
<tr>
<td>
29
</td>
</tr>
<tr>
<td>
30
</td>
</tr>
<tr>
<td>
31
</td>
</tr>
<tr>
<td>
32
</td>
</tr>
<tr>
<td>
33
</td>
</tr>
<tr>
<td>
34
</td>
</tr>
<tr>
<td>
35
</td>
</tr>
<tr>
<td>
36
</td>
</tr>
<tr>
<td>
37
</td>
</tr>
<tr>
<td>
38
</td>
</tr>
<tr>
<td>
39
</td>
</tr>
<tr>
<td>
40
</td>
</tr>
<tr>
<td>
41
</td>
</tr>
<tr>
<td>
42
</td>
</tr>
<tr>
<td>
43
</td>
</tr>
<tr>
<td>
44
</td>
</tr>
<tr>
<td>
45
</td>
</tr>
<tr>
<td>
46
</td>
</tr>
<tr>
<td>
47
</td>
</tr>
<tr>
<td>
48
</td>
</tr>
<tr>
<td>
49
</td>
</tr>
<tr>
<td>
50
</td>
</tr>
<tr>
<td>
51
</td>
</tr>
<tr>
<td>
52
</td>
</tr>
<tr>
<td>
53
</td>
</tr>
<tr>
<td>
54
</td>
</tr>
<tr>
<td>
55
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
footer comes here for each page
</td>
</tr>
</tfoot>
</table>
</div>
<br clear="all" />
<input type="button" id="print" name="print" value="Print" onclick="javascript:PrintPage();"
class="button" />
</form>
</body>
</html>
Urooj Khan
- 129
- 1
- 3