如果打印过大,Thead无法正常工作

时间:2019-02-21 02:11:41

标签: html css printing

我想制作一个用于打印的网页(使用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>

0 个答案:

没有答案