我想制作一个用于打印的网页(使用window.print()),每页的页眉和页脚。但是,我发现有关标签thead的事情很奇怪。
如果标签thead中的行过多,则它将正确显示在第一页中,而在第二页中消失。
如您在示例中看到的,我在广告中放置了8行,它可以正常工作。 thead和tfoot都出现在每页中;但是如果我在广告中添加第9行,则整个标题将在第二页中消失。
请帮忙,我尝试了很多方法,但都无济于事,也找不到其他遇到类似问题的方法。 谢谢。
@media print
{
@page
{
size: landscape; /* $$ doesn't work on IE, ask user change to landscape manually */
}
}
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
table
{
border-collapse: collapse;
width: 100%;
}
table, th, td
{
border: 1px solid black;
text-align: left;
}
td
{
height: 20px;
}
<html><head>
</head>
<body>
<table id="print_table">
<thead>
<tr>
<th>TEST thead 1</th>
</tr>
<tr>
<th>TEST thead 2</th>
</tr>
<tr>
<th>TEST thead 3</th>
</tr>
<tr>
<th>TEST thead 4</th>
</tr>
<tr>
<th>TEST thead 5</th>
</tr>
<tr>
<th>TEST thead 6</th>
</tr>
<tr>
<th>TEST thead 7</th>
</tr>
<tr>
<th>TEST thead 8</th>
</tr>
</thead>
<tfoot>
<tr>
<th>TEST tfoot</th>
</tr>
<tr>
<th>TEST tfoot</th>
</tr>
<tr>
<th>TEST tfoot</th>
</tr>
<tr>
<th>TEST tfoot</th>
</tr>
<tr>
<th>TEST tfoot</th>
</tr>
<tr>
<th>TEST tfoot</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>00001</td>
</tr>
<tr>
<td>00002</td>
</tr><tr>
<td>00003</td>
</tr><tr>
<td>00004</td>
</tr><tr>
<td>00005</td>
</tr><tr>
<td>00006</td>
</tr><tr>
<td>00007</td>
</tr><tr>
<td>00008</td>
</tr><tr>
<td>00009</td>
</tr><tr>
<td>00010</td>
</tr><tr>
<td>00011</td>
</tr><tr>
<td>00012</td>
</tr><tr>
<td>00013</td>
</tr><tr>
<td>00014</td>
</tr><tr>
<td>00015</td>
</tr><tr>
<td>00016</td>
</tr><tr>
<td>00017</td>
</tr><tr>
<td>00018</td>
</tr><tr>
<td>00019</td>
</tr><tr>
<td>00020</td>
</tr><tr>
<td>00021</td>
</tr>
</tbody>
</table>
</body></html>