जवाबों:
break-inside:avoid, और के साथ अक्षम किया जा सकता है break:inside: auto। देखें codereview.chromium.org/2021703002/#ps20001
कुछ ब्राउज़र theadप्रत्येक पृष्ठ पर तत्व को दोहराते हैं , जैसा कि वे माना जाता है। दूसरों को कुछ मदद की ज़रूरत है: इसे अपने सीएसएस में जोड़ें:
thead {display: table-header-group;}
tfoot {display: table-header-group;}
ओपेरा 7.5 और IE 5 हेडर को दोहराएंगे चाहे आप कोई भी प्रयास करें।
( स्रोत )
theadअपने CSS (IE7 संगत) में सिर्फ उदाहरण की कोशिश की है और जब मैं प्रिंट पूर्वावलोकन करता हूं तो यह शीर्षकों को दोहराता है। धन्यवाद। लेकिन, मुझे अगले पृष्ठ के शीर्ष पर एक प्रतिकृति पंक्ति मिलती है। क्यों?
इससे पहले कि आप इस समाधान को लागू करें यह जानना महत्वपूर्ण है कि वेबकिट वर्तमान में ऐसा नहीं करता है।
यहाँ Chrome समस्या ट्रैकर पर प्रासंगिक समस्या है: http://code.google.com/p/chromium/issues/detail?id=24826
और वेबकिट मुद्दे पर ट्रैकर: https://bugs.webkit.org/show_bug.cgi?id=17205
यदि आप यह दिखाना चाहते हैं कि यह आपके लिए महत्वपूर्ण है (मैंने किया था) इसे Chrome समस्या ट्रैकर पर स्टार दें।
यदि आप अपने CSS में निम्नलिखित जोड़ते हैं, तो उड़न तश्तरी xhtmlrenderer पीडीएफ आउटपुट के हर पृष्ठ पर THEAD को दोहराता है:
table {
-fs-table-paginate: paginate;
}
(यह R8 रिलीज के बाद से कम से कम काम करता है।)
मैं HTML टेबल कैसे प्रिंट करूं। प्रत्येक पृष्ठ पर शीर्षलेख और पाद लेख
Webkit Browsers में भी काम करते हैं
<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>