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?
Repeat table headers in print mode
Asked Answered
I have successfully used that in Firefox. –
Quackenbush
These comments are quite old. As of 3/13/13 lazy spot checking shows it works in latest IE10, and even venerable IE8... –
Aerothermodynamics
..but not Chrome. (see next answer) Looking at the issue tracker, it looks like there is some traction on this finally. –
Explicative
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 –
Tchad for more explanation and walk through. here –
Metaphysic
@Coccid 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. –
Deathlike
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). –
Scribe
content overlaps with repeated th –
Suiter
safari not support??any solution –
Isogamy
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)
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. –
Septet
mother of god, at the time this was written IE5 was still something? –
Unbuckle
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? –
Trapper 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.)
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).
Chrome and Opera browsers do not support thead {display: table-header-group;} but rest of others support properly..
how to achieve this in chrome? –
Notwithstanding
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>
Just work on desktop chrome.Chrome/Safari on iphone not work! –
Nila
© 2022 - 2024 — McMap. All rights reserved.