인쇄 모드에서 테이블 헤더를 반복합니다
https://stackoverflow.com/questions/274149
-
07-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
CSS에서 @Page 내부의 속성을 사용하여 테이블이 여러 페이지에 퍼지면 모든 페이지에서 테이블 헤더 (TH)를 반복해야한다고 말할 수 있습니까?
다른 팁
일부 브라우저가 반복됩니다 thead 예상대로 각 페이지의 요소. 다른 사람들은 도움이 필요합니다. CSS에 이것을 추가하십시오.
thead {display: table-header-group;}
tfoot {display: table-header-group;}
Opera 7.5와 IE 5는 당신이 무엇을 시도하든 헤더를 반복하지 않습니다.
(원천)
이 솔루션을 구현하기 전에 WebKit이 현재이를 수행하지 않는다는 것을 아는 것이 중요합니다.
Chrome Issue Tracker의 관련 문제는 다음과 같습니다. http://code.google.com/p/chromium/issues/detail?id=24826
그리고 WebKit 문제 추적기 : https://bugs.webkit.org/show_bug.cgi?id=17205
당신이 당신에게 중요하다는 것을 보여주고 싶다면 Chrome 문제 추적기에 출연하십시오.
플라잉 접시 xhtmlrenderer CSS에 다음을 추가하면 PDF 출력의 모든 페이지에서 Thead를 반복합니다.
table {
-fs-table-paginate: paginate;
}
(적어도 R8 릴리스 이후로 작동합니다.)
크롬 및 오페라 브라우저는 지원하지 않습니다 thead {display: table-header-group;} 그러나 다른 사람들의 나머지는 제대로 지원합니다 ..
HTML 테이블을 어떻게 인쇄합니까? 각 페이지의 헤더 및 바닥 글
또한 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>
제휴하지 않습니다 StackOverflow
