CSS 在打印模式下重复表头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/274149/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Repeat table headers in print mode
提问by avernet
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?
是否可以在 CSS 中使用 @page 内的属性表示如果表格分布在多个页面上，表格标题（th）应该在每个页面上重复？
回答by nickf
Some browsers repeat the theadelement on each page, as they are supposed to. Others need some help: Add this to your CSS:
一些浏览器会thead在每个页面上重复该元素，就像他们应该做的那样。其他人需要一些帮助：将其添加到您的 CSS 中：
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.
无论您尝试什么，Opera 7.5 和 IE 5 都不会重复标题。
(source)
（来源）
回答by Nick Knowlson
Before you implement this solution it's important to know that Webkit currently doesn't do this.
在您实施此解决方案之前，重要的是要知道 Webkit 当前不这样做。
Here is the relevant issue on the Chrome issue tracker: http://code.google.com/p/chromium/issues/detail?id=24826
以下是 Chrome 问题跟踪器的相关问题：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
在 Webkit 问题跟踪器上：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 问题跟踪器上加星标。
回答by Eero
Flying Saucer xhtmlrendererrepeats the THEAD on every page of PDF output, if you add the following to your CSS:
如果您将以下内容添加到 CSS，飞碟 xhtmlrenderer 会在 PDF 输出的每一页上重复 THEAD：
table {
-fs-table-paginate: paginate;
}
(It works at least since the R8 release.)
（它至少从 R8 版本开始就有效。）
回答by SantoshK
Chrome and Opera browsers do not support thead {display: table-header-group;}but rest of others support properly..
Chrome 和 Opera 浏览器不支持，thead {display: table-header-group;}但其他浏览器支持正常..
回答by Urooj Khan
how do i print HTML table. Header and footer on each page
我如何打印 HTML 表格。每页的页眉和页脚
Also Work in Webkit Browsers
也适用于 Webkit 浏览器
<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>
