12/8/2020 css - Repeat table headers in print mode - Stack Overflow

Repeat table headers in print mode

Asked 12 years, 1 month ago Active 2 months ago Viewed 143k times

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?
103
css css-tables

edited Sep 14 '16 at 17:34 asked Nov 8 '08 at 1:12

26
Brian Tompsett - 汤莱恩 avernet
5,055 14 46 118 28.4k 42 117 159

6 Answers Active Oldest Votes

This is what the THEAD element is for. Official docs here.

117 answered Nov 8 '08 at 1:19

tvanfosson
480k 92 678 772

1 I haven't thought about that, but it doesn't seem to work in practice. – avernet Nov 8 '08 at 2:03

1 I have successfully used that in Firefox. – jishi Nov 8 '08 at 2:17

5 As usual, it requires a non-broken browser -- see jishi's comment. – Peter Rowell Nov 8 '08 at 2:45

9 These comments
By using are quite
our site, old. As of 3/13/13
you acknowledge lazyhave
that you spot read
checking
and shows it works
understand ourinCookie
latest IE10,
Policyand even venerable
, Privacy IE8...
Policy, and – Nathan
our Terms Mar 14 .'13 at 1:07
of Service

https://stackoverflow.com/questions/274149/repeat-table-headers-in-print-mode 1/11
12/8/2020 css - Repeat table headers in print mode - Stack Overflow

8 Chrome 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 codereview.chromium.org/2021703002/#ps20001 – Alex Osborn Oct 20 '16 at 5:28

Some browsers repeat the thead element on each page, as they are supposed to. Others need some help: Add this to your CSS:

72 thead {display: table-header-group;}

tfoot {display: table-header-group;}

Opera 7.5 and IE 5 won't repeat headers no matter what you try.

(source)

edited Dec 17 '15 at 10:34 answered Nov 8 '08 at 1:37

cadrian nickf
7,035 2 29 41 488k 190 608 704

Neither 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 8 '08 at 2:04

8 The latest versions of Chrome and Safari also don't currently do this. See my answer for links to their issue trackers. – Nick Knowlson Mar 15 '12 at 19:18

1 mother of god, at the time this was written IE5 was still something? – igorsantos07 Oct 5 '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

Before you implement this solution it's important to know that Webkit currently doesn't do this.

45 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).
By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service.

https://stackoverflow.com/questions/274149/repeat-table-headers-in-print-mode 2/11
12/8/2020 css - Repeat table headers in print mode - Stack Overflow

answered Mar 15 '12 at 0:09

Nick Knowlson
6,597 4 42 62

1 Thanks for this - it would have caused me a huge headache if I hadn't scrolled down. – Seiyria Jul 7 '14 at 20:18

4 And nearly 4 years later (and 8 years since the WebKit issue was filed), this is still the case! – jcaron Feb 26 '16 at 12:53

Flying Saucer xhtmlrenderer repeats the THEAD on every page of PDF output, if you add the following to your CSS:

44 table {
-fs-table-paginate: paginate;
}

(It works at least since the R8 release.)

edited Dec 20 '12 at 9:33 answered Apr 13 '10 at 22:57

Eero
4,267 4 34 40

4 This is just what I was looking for. Thank you! – Alex Jul 5 '12 at 12:52

Awesome! (the link is dead :/) – Cyril N. Dec 14 '12 at 11:07

Awesome! Thanks! – Frison Alexander May 30 '18 at 12:17

Chrome and Opera browsers do not support thead {display: table-header-group;} but rest of others support properly..

7 edited Mar 29 '17 at 18:08 answered Dec 17 '15 at 12:27

GoldBishop SantoshK
2,547 4 40 73 1,445 11 20

By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service.

https://stackoverflow.com/questions/274149/repeat-table-headers-in-print-mode 3/11
12/8/2020 css - Repeat table headers in print mode - Stack Overflow

how to achieve this in chrome? – Null Pointer Jul 10 '18 at 12:02

how do i print HTML table. Header and footer on each page

5 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
By using
{ our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service.
display: block;
https://stackoverflow.com/questions/274149/repeat-table-headers-in-print-mode 4/11
12/8/2020 css - Repeat table headers in print mode - Stack Overflow
}
</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>
By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service.
<td>

https://stackoverflow.com/questions/274149/repeat-table-headers-in-print-mode 5/11
12/8/2020 css - Repeat table headers in print mode - Stack Overflow
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
By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service.
</td>

https://stackoverflow.com/questions/274149/repeat-table-headers-in-print-mode 6/11
12/8/2020 css - Repeat table headers in print mode - Stack Overflow
</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>
By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service.
<tr>

https://stackoverflow.com/questions/274149/repeat-table-headers-in-print-mode 7/11
12/8/2020 css - Repeat table headers in print mode - Stack Overflow
<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>
By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service.
35

https://stackoverflow.com/questions/274149/repeat-table-headers-in-print-mode 8/11
12/8/2020 css - Repeat table headers in print mode - Stack Overflow
</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>
By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service.
</tr>

https://stackoverflow.com/questions/274149/repeat-table-headers-in-print-mode 9/11
12/8/2020 css - Repeat table headers in print mode - Stack Overflow
<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>
By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service.
<td>

https://stackoverflow.com/questions/274149/repeat-table-headers-in-print-mode 10/11
12/8/2020 css - Repeat table headers in print mode - Stack Overflow
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>

answered Dec 21 '17 at 6:26

Urooj Khan
101 1 3

Just work on desktop chrome.Chrome/Safari on iphone not work! – Devin Gong Jul 30 '19 at 8:40

By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service.

https://stackoverflow.com/questions/274149/repeat-table-headers-in-print-mode 11/11