gpt4 book ai didi

html - 从 HTML 生成 PDF,在表格内给出不需要的空间

转载 作者:行者123 更新时间:2023-11-28 03:26:12 25 4
gpt4 key购买 nike

<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 并且具有类“t2”的 thead 应该在每一页中重复,因为“table-block”div 中表格中的数据增加。

enter image description here

最佳答案

<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 - 从 HTML 生成 PDF,在表格内给出不需要的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44963473/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com