CSS'de bir @page içinde bir özellik kullanarak, tablo birden fazla sayfaya yayılıyorsa, tablo başlıklarının (th) her sayfada tekrarlanması gerektiğini söylemek mümkün müdür?
Yanıtlar:
break-inside:avoidve ile devre dışı bırakılabilir break:inside: auto. Bkz. Codereview.chromium.org/2021703002/#ps20001
Bazı tarayıcılar thead, olması gerektiği gibi her sayfada öğeyi tekrarlar . Diğerlerinin biraz yardıma ihtiyacı var: Bunu CSS'nize ekleyin:
thead {display: table-header-group;}
tfoot {display: table-header-group;}Opera 7.5 ve IE 5, ne denerseniz deneyin başlıkları tekrarlamaz.
( kaynak )
theadÖrneği CSS'imde denedim (IE7 uyumlu) ve baskı önizlemesi yaptığımda başlıkları tekrar ediyor. Teşekkür ederim. Ancak, sonraki sayfanın en üstünde çoğaltılmış bir satır görüyorum. Neden?
Bu çözümü uygulamadan önce, Webkit'in şu anda bunu yapmadığını bilmek önemlidir.
Chrome sorun izleyiciyle ilgili sorun şu şekildedir: http://code.google.com/p/chromium/issues/detail?id=24826
Ve Webkit sorun izleyicisinde: https://bugs.webkit.org/show_bug.cgi?id=17205
Sizin için önemli olduğunu göstermek istiyorsanız Chrome sorun izleyicisine yıldız ekleyin (ben yaptım).
Flying Saucer xhtmlrenderer , CSS'nize aşağıdakileri eklerseniz, THEAD'ı PDF çıktısının her sayfasında tekrarlar:
table {
-fs-table-paginate: paginate;
}(En azından R8 sürümünden beri çalışıyor.)
Chrome ve Opera tarayıcıları desteklemez thead {display: table-header-group;}ancak diğer tarayıcılar düzgün şekilde destekler ..
HTML tablosunu nasıl yazdırırım. Her sayfada üst bilgi ve alt bilgi
Webkit Tarayıcılarında da Çalışın
<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>