我有一个项目需要打印一个包含很多行的HTML表。
问题是在表和标题之间产生空白。如何在第一页上避开这个空格?
我正在使用以下css:
@media print
{
@page { size: A4 landscape;}
*{
float:none!important;
position:static!important;
}
}
查看打印预览: here
表CSS:
.row-header{position: relative;}
.row-table{top: 100%; left: 0; right: 0; margin-top: 5px;page-break-inside: avoid;}
.row-header img{float:left; height: 100px;}
.row-header span{font-weight: bold;padding: 5px;font-size: 12px;}
表格HTML:
<div class="tt-wrapper" style="margin-right: 0px;">
<div class="tt-content" style="position:relative;top: -10px;margin-bottom: 50px;">
<div class="tt-row row-header" style="margin: 10px;">
<img src="${context}${IMG_LOGO}" alt="Logo"/>
<span>${TXT_1}</span><br>
<span>${TXT_2}</span><br>
<span>${TXT_3}</span><br><br>
<span>${TITLE}</span>
</div>
<div class="tt-row row-table" style="margin: 0px!important;">
<div style="padding: 0px 5px;">
<div class="tt-col-100">
<table class="tt-table" align="center">
<thead>
<tr>
<th align="center" width="4%">N<sup>o</sup> RP</th>
<th align="center" width="4%">N<sup>o</sup> Pedido</th>
<th align="center" width="4%">Status Item Pedido</th>
<th align="center" width="4%">Código</th>
<th align="center" width="15%">Descrição</th>
<th align="center" width="4%">Unidade</th>
<th align="center" width="4%">Marca</th>
<th align="center" width="3%">Qtde <br>Pedido</th>
<th align="center" width="3%">Saldo <br>Disponível</th>
<th align="center" width="5%">Órgão</th>
<th align="center" width="3%">Valor <br>Unitário</th>
<th align="center" width="8%">Fornecedor</th>
</tr>
</thead>
<tbody>..</tbody>
</table>
</div>
</div>
<div>
</div>
</div>