Question

<html>
    <head>

	  <style>
	  body {
		margin: 0;
	}
	  table{
		width: 100%;
		border-spacing: 0;
		border-collapse: collapse;
		text-align: center;
	  }
	  thead.t1{
	  background: #dac8c8;
	  }
	  table td , table th{
	  padding:10px;
	  }
	  table{
	  margin-top:20px;
	  }
	  thead.t2{
	  background: #dcdcdc;
	  }
	@media print{
	@page {
		size: A4 landscape;
	}
  }
	
	table { page-break-inside:auto }
	tr    { page-break-inside:avoid; page-break-after:auto }
	thead { display:table-header-group }
	@media print{
		table {page-break-after:always}
	}	



	  
	  </style>
	  
	 </head>

	<body class="" style="width:1070px; margin:0 auto;">
	
	
	<div style="height:300px; width:100%; background:#ccc; border-bottom:2px solid #000;">
	</div>
		<table class="splitForPrint table-rc1 ">
			<thead class="t1">
			<tr>
				<th> column1 </th>
				<th> column2 </th>
				<th> column3 </th>
				<th> column4 </th>
				<th> column5 </th>
				<th> column6 </th>
				<th> column7 </th>
				<th> column8 </th>
			</tr>
		</thead>
		
				<tbody>
				<tr>
				<td colspan="8" class="">
					<div class=" table-block">
						
						<table>
							<thead class="t2">
								<tr>
									<td> column thead 1 </td>
									<td> column thead 2 </td>
									<td> column thead 3 </td>
									<td> column thead 4 </td>
									<td> column thead 5 </td>
								</tr>
							</thead>
							
							
							<tbody>
							
								<tr>
								<td> column td1 </td>
								<td> column td2 </td>
								<td> column td3 </td>
								<td> column td4 </td>
								<td> column td5 </td>
							</tr>
							<tr>
								<td> column td1 </td>
								<td> column td2 </td>
								<td> column td3 </td>
								<td> column td4 </td>
								<td> column td5 </td>
							</tr>
							<tr>
								<td> column td1 </td>
								<td> column td2 </td>
								<td> column td3 </td>
								<td> column td4 </td>
								<td> column td5 </td>
							</tr>
							<tr>
								<td> column td1 </td>
								<td> column td2 </td>
								<td> column td3 </td>
								<td> column td4 </td>
								<td> column td5 </td>
							</tr>
							<tr>
								<td> column td1 </td>
								<td> column td2 </td>
								<td> column td3 </td>
								<td> column td4 </td>
								<td> column td5 </td>
							</tr>
							<tr>
								<td> column td1 </td>
								<td> column td2 </td>
								<td> column td3 </td>
								<td> column td4 </td>
								<td> column td5 </td>
							</tr>
							<tr>
								<td> column td1 </td>
								<td> column td2 </td>
								<td> column td3 </td>
								<td> column td4 </td>
								<td> column td5 </td>
							</tr>
							<tr>
								<td> column td1 </td>
								<td> column td2 </td>
								<td> column td3 </td>
								<td> column td4 </td>
								<td> column td5 </td>
							</tr>
							<tr>
								<td> column td1 </td>
								<td> column td2 </td>
								<td> column td3 </td>
								<td> column td4 </td>
								<td> column td5 </td>
							</tr>
							<tr>
								<td> column td1 </td>
								<td> column td2 </td>
								<td> column td3 </td>
								<td> column td4 </td>
								<td> column td5 </td>
							</tr>
							<tr>
								<td> column td1 </td>
								<td> column td2 </td>
								<td> column td3 </td>
								<td> column td4 </td>
								<td> column td5 </td>
							</tr>
							<tr>
								<td> column td1 </td>
								<td> column td2 </td>
								<td> column td3 </td>
								<td> column td4 </td>
								<td> column td5 </td>
							</tr>
					
							
							
							</tbody>
						
						</table>
					
					
	
					</div>
				</td>
				</tr>
				</tbody>
				
		</table>
	</body>
	
</html>

这里我有HTML代码，当我生成PDF时，它不正常。我想要的表应该从第一页开始而不是从第二页开始，而在横向模式下生成PDF也应该在每个页面中重复，因为“table-block”div中的表格中的数据增加。

Answer 1

<html>
    <head>

	  <style>
	  body {
		margin: 0;
	}
	  table{
		width: 100%;
		border-spacing: 0;
		border-collapse: collapse;
		text-align: center;
	  }
	  thead.t1{
	  background: #dac8c8;
	  }
	  table td , table th{
	  padding:1mm;
	  }
	  table{
	  margin-top:1mm;
	  }
	  thead.t2{
	  background: #dcdcdc;
	  }
	@media print{
	@page {
		size: A4 landscape;
	}
  }
	
	table { page-break-inside:auto }
	tr    { page-break-inside:avoid; page-break-after:auto }
	thead { display:table-header-group }
	@media print{
		table {page-break-after:always}
	}	



	  
	  </style>
	  
	 </head>

	<body class="" style="width:1070px; margin:0 auto;">
	
	
<div style="height:300px; width:100%; background:#ccc; border-bottom:2px solid #000;">
	</div>
		<table class="splitForPrint table-rc1 ">
			<thead class="t1">
			<tr>
				<th> column1 </th>
				<th> column2 </th>
				<th> column3 </th>
				<th> column4 </th>
				<th> column5 </th>
				<th> column6 </th>
				<th> column7 </th>
				<th> column8 </th>
			</tr>
		</thead>
		
				<tbody>
				<tr>
				<td colspan="8" class="">
					<div class=" table-block">
						
						<table>
							<thead class="t2">
								<tr>
									<td> column thead 1 </td>
									<td> column thead 2 </td>
									<td> column thead 3 </td>
									<td> column thead 4 </td>
									<td> column thead 5 </td>
								</tr>
							</thead>
							
							
							<tbody>
							
								<tr>
								<td> column td1 </td>
								<td> column td2 </td>
								<td> column td3 </td>
								<td> column td4 </td>
								<td> column td5 </td>
							</tr>
							<tr>
								<td> column td1 </td>
								<td> column td2 </td>
								<td> column td3 </td>
								<td> column td4 </td>
								<td> column td5 </td>
							</tr>
							<tr>
								<td> column td1 </td>
								<td> column td2 </td>
								<td> column td3 </td>
								<td> column td4 </td>
								<td> column td5 </td>
							</tr>
							<tr>
								<td> column td1 </td>
								<td> column td2 </td>
								<td> column td3 </td>
								<td> column td4 </td>
								<td> column td5 </td>
							</tr>
							<tr>
								<td> column td1 </td>
								<td> column td2 </td>
								<td> column td3 </td>
								<td> column td4 </td>
								<td> column td5 </td>
							</tr>
							<tr>
								<td> column td1 </td>
								<td> column td2 </td>
								<td> column td3 </td>
								<td> column td4 </td>
								<td> column td5 </td>
							</tr>
							
								<td> column td1 </td>
								<td> column td2 </td>
								<td> column td3 </td>
								<td> column td4 </td>
								<td> column td5 </td>
							</tr>
					
							
							
							</tbody>
						
						</table>
					
					
	
					</div>
				</td>
				</tr>
				</tbody>
				
		</table>
	</body>
	
</html>

我使用mm代替px，表格显示在第一页。这就是你问的问题吗？

从HTML生成PDF，在表格内部提供不必要的空间

1 个答案: