是否可以在 CSS 中使用 @page 内的属性来表示如果表格分布在多个页面上，则表头（th）应该在每个页面上重复？
Alessandro Vernet
问问题
170128 次
6 回答
80
一些浏览器在每个页面上重复该thead元素，因为它们应该这样做。其他人需要一些帮助：将其添加到您的 CSS 中：
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
无论您尝试什么，Opera 7.5 和 IE 5 都不会重复标题。
（来源）
于 2008-11-08T01:37:15.050 回答
51
如果您将以下内容添加到 CSS 中，Flying Saucer xhtmlrenderer会在 PDF 输出的每一页上重复 THEAD：
table {
-fs-table-paginate: paginate;
}
（至少从 R8 版本开始就可以使用。）
于 2010-04-13T22:57:23.993 回答
46
更新：看起来这可能已在 2016 年修复！https://bugs.chromium.org/p/chromium/issues/detail?id=24826#c45
原始答案 (2012)： 在您实施此解决方案之前，重要的是要知道 Webkit 目前不这样做。
这是 Chrome 问题跟踪器上的相关问题：http ://code.google.com/p/chromium/issues/detail?id=24826
在 Webkit 问题跟踪器上：https ://bugs.webkit.org/show_bug.cgi?id=17205
如果您想表明它对您很重要（我做过），请在 Chrome 问题跟踪器上加注星标。
于 2012-03-15T00:09:50.843 回答
10
Chrome 和 Opera 浏览器不支持thead {display: table-header-group;}，但其他浏览器正常支持。
于 2015-12-17T12:27:20.520 回答
8
我如何打印 HTML 表格。每页的页眉和页脚
也适用于 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>
于 2017-12-21T06:26:01.437 回答