时间戳

首页 > 解决方案 > Thead 在打印时不工作，如果它是过大的

html - Thead 在打印时不工作，如果它是过大的

问题描述

我想制作一个用于打印的网页（使用 window.print()），每页都有页眉和页脚。然而，我发现了一个关于 tag 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>

标签： htmlcssprinting

解决方案

推荐阅读