打印大型HTML表时的空白

时间:2018-02-20 14:39:59

标签: html css printing

我有一个项目需要打印一个包含很多行的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>

0 个答案:

没有答案