Câu trả lời:
break-inside:avoidvà có thể bị vô hiệu hóa với break:inside: auto. Xem codereview.chromium.org/2021703002/#ps20001
Một số trình duyệt lặp lại theadphần tử trên mỗi trang, như chúng được cho là vậy. Những người khác cần một số trợ giúp: Thêm cái này vào CSS của bạn:
thead {display: table-header-group;}
tfoot {display: table-header-group;}Opera 7.5 và IE 5 sẽ không lặp lại tiêu đề cho dù bạn có thử gì đi nữa.
( nguồn )
theadví dụ trong CSS của mình (tương thích với IE7) và nó lặp lại các tiêu đề khi tôi xem trước bản in. Cảm ơn bạn. Nhưng, tôi thấy để có được một hàng lặp lại ở đầu trang tiếp theo. Tại sao?
Trước khi bạn thực hiện giải pháp này, điều quan trọng là phải biết rằng Webkit hiện không thực hiện điều này.
Đây là sự cố liên quan trên trình theo dõi sự cố Chrome: http://code.google.com/p/chromium/issues/detail?id=24826
Và trên trình theo dõi sự cố Webkit: https://bugs.webkit.org/show_bug.cgi?id=17205
Gắn dấu sao nó trên trình theo dõi vấn đề của Chrome nếu bạn muốn cho thấy rằng nó quan trọng đối với bạn (tôi đã làm).
Flying Saucer xhtmltrình kết xuất lặp lại THEAD trên mỗi trang của đầu ra PDF, nếu bạn thêm phần sau vào CSS của mình:
table {
-fs-table-paginate: paginate;
}(Nó hoạt động ít nhất kể từ khi phát hành R8.)
Các trình duyệt Chrome và Opera không hỗ trợ thead {display: table-header-group;}nhưng các trình duyệt khác hỗ trợ đúng cách ..
làm cách nào để in bảng HTML. Đầu trang và chân trang trên mỗi trang
Cũng hoạt động trong trình duyệt 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>