Ist es in CSS möglich, eine Eigenschaft innerhalb einer @ page zu verwenden, um zu sagen, dass Tabellenköpfe (th) auf jeder Seite wiederholt werden sollten, wenn sich die Tabelle über mehrere Seiten erstreckt?Tabellenköpfe im Druckmodus wiederholen
Einige Browser wiederholen das thead Element auf jeder Seite, wie sie sollen. Andere benötigen Hilfe: Fügen Sie das zu Ihrem CSS hinzu:
Opera 7.5 und IE 5 werden Header nicht wiederholen, egal was Sie versuchen.
(source)
Weder tut Fliegende Untertasse, die ich verwende, um ein PDF zu generieren. Ich werde diese Frage auch in der Mailingliste von Flying Saucer stellen, um zu sehen, ob es einen anderen Weg gibt, dies zu tun. – avernet
Die aktuellen Versionen von Chrome und Safari tun dies derzeit nicht. Siehe meine Antwort für Links zu ihren Problemverfolgern. –
Mutter Gottes, zu der Zeit, als dies geschrieben wurde IE5 war immer noch etwas? – igorsantos07
Flying Saucer xhtmlrenderer wiederholt die THEAD auf jeder Seite der PDF-Ausgabe, wenn Sie die folgend in der CSS hinzufügen:
table {
-fs-table-paginate: paginate;
}
(Es funktioniert zumindest seit der R8-Release.)
Bevor Sie diese Lösung implementieren, ist es wichtig zu wissen, dass Webkit dies derzeit nicht tut.
ist die relevante Frage auf dem Tracker Chrome Ausgabe: http://code.google.com/p/chromium/issues/detail?id=24826
Und auf der Webkit issue tracker: https://bugs.webkit.org/show_bug.cgi?id=17205
Stern auf dem Tracker Chrome Problem, wenn Sie wollen zeigen, dass es Ihnen wichtig ist (Ich tat).
Chrome und Opera-Browser unterstützt nicht thead {display: table-header-group;} aber Rest von anderen unterstützt richtig ..
, wie ich HTML-Tabelle drucken zu tun. Kopf- und Fußzeile auf jeder Seite
auch die Arbeit in Webkit Browser
<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>
Ich habe nicht darüber nachgedacht, aber es scheint nicht in der Praxis zu arbeiten. – avernet
Ich habe das erfolgreich in Firefox verwendet. – jishi
Wie üblich benötigt es einen nicht-gebrochenen Browser - siehe Jishis Kommentar. –