Jawaban:
break-inside:avoid, dan dapat dinonaktifkan dengan break:inside: auto. Lihat codereview.chromium.org/2021703002/#ps20001
Beberapa browser mengulangi theadelemen pada setiap halaman, sebagaimana mestinya. Orang lain membutuhkan bantuan: Tambahkan ini ke CSS Anda:
thead {display: table-header-group;}
tfoot {display: table-header-group;}Opera 7.5 dan IE 5 tidak akan mengulang header apapun yang Anda coba.
( sumber )
theadcontoh di CSS saya (kompatibel dengan IE7) dan itu mengulangi judul ketika saya melakukan pratinjau cetak. Terima kasih. Tapi, saya melihat untuk mendapatkan baris yang direplikasi di bagian atas halaman berikutnya. Mengapa?
Sebelum Anda menerapkan solusi ini, penting untuk mengetahui bahwa Webkit saat ini tidak melakukan ini.
Berikut masalah yang relevan di pelacak masalah Chrome: http://code.google.com/p/chromium/issues/detail?id=24826
Dan di pelacak masalah Webkit: https://bugs.webkit.org/show_bug.cgi?id=17205
Beri bintang di pelacak masalah Chrome jika Anda ingin menunjukkan bahwa ini penting bagi Anda (saya lakukan).
Flying Saucer xhtmlrenderer mengulangi THEAD di setiap halaman keluaran PDF, jika Anda menambahkan yang berikut ini ke CSS:
table {
-fs-table-paginate: paginate;
}(Ini berfungsi setidaknya sejak rilis R8.)
Browser Chrome dan Opera tidak mendukung thead {display: table-header-group;}tetapi yang lainnya mendukung dengan baik ..
bagaimana cara mencetak tabel HTML. Header dan footer di setiap halaman
Juga Bekerja di Browser 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>