-1

Tenho um script de um sistema legado que cria uma tabela com os dados vindo do banco em php. O script foi desenvolvido pra armazenar tudo numa tag $html e no final dar um echo.

Ao final desse script existe um elemento rodapé com lugar para o funcionário assinar. Cliente pediu pra que esse rodapé ficasse no final de toda página que for impressa.

Até aí tudo bem. Coloquei a div com o css abaixo:

div.footer {
    position: fixed;
    bottom: 0;
}

e a tabela com a seguinte configuração pra quebra de página se a "linha" ultrapassar o final da página:

table { page-break-inside:auto; margin-bottom: 10px; }
tr    { page-break-inside:avoid; page-break-after:auto; }
thead { display:table-header-group }
tfoot { display:table-footer-group }

Tudo funciona de forma bacana a não ser pelo fato de o elemento rodapé sobrescrever a última linha da tabela em certas páginas onde a tabela pega toda a altura da página.

Teria alguma forma evitar isso? Tentei algumas formas com javascript e css mas como o número de elementos rodapé é um só, mesmo ele sendo impresso em 3, 4, 5 páginas, ainda não consegui.

<html>
    <head>
        <style type="text/css" media="print">
            table { page-break-inside:auto; margin-bottom: 10px; }
            tr    { page-break-inside:avoid; page-break-after:auto; }
            thead { display:table-header-group }
            tfoot { display:table-footer-group }

            div.footer {
                position: fixed;
                bottom: 0;
            }
        </style>
    </head>

    <body>
        <table>
        ...
        </table>

        <div class='footer'>
        <label style='font-family:verdana;font-size:10px;font-weight:bold;'>Assinatura: _______________________________________________<br>Por ser verdade, assino e dou fé ao presente documento</label>
        <div id='pages' class='pages'></div>
    </div>  
    </body>
</html>

Exemplo

3
  • Cara acho que posso ter uma solução para vc, mas edite sua pergunta coloque codígo suficiente para que possa pelo menos simular o problema que vc está tendo ai, sem isso não da para te ajudar muito
    – hugocsl
    15/10/2019 às 21:16
  • @hugocsl ok. Basicamente é isso que editei. A tabela é criada dinamicamente no looping dos dados do banco. Fora desse looping tá o rodapé que coloquei fixo na hora de imprimir pra sair em todas as folhas.
    – A52
    16/10/2019 às 11:39
  • Publiquei uma solução ao que vc pode ajustar os valores para ficar mais perto do que vc precisa
    – hugocsl
    16/10/2019 às 12:18

1 Resposta 1

-1

Cara tenho uma solução para vc, não é uma solução totalmente perfeita, mas vai resolver o problema. vc precisa que a altura da TD seja maior que a altura da div Footer, apenas isso.

Eu tb fiz essa regra CSS para mostra o footer só quando for impressão, mas vc pode tratar isso depois, conforme achar melhor.

div.footer {
    display: none;
}

@media print {
    div.footer {
        display: block;
        position: fixed;
        bottom: 0px;
        height: 45px;
    }
}

Então vc precisa declarar na mão um height para as TD, tipo 60px, e a div footer que que ter no máximo uns 45px, dessa forma, a última TD da página sempre vai "quebrar" para próxima página quando não tiver espaço para ela, deixando assim um espaço de aproximadamente 59px, justamente o espaço suficiente para caber o footer que tem 45px de altura entende :)

inserir a descrição da imagem aqui

table {
    page-break-inside: auto;
}

tr {
    page-break-inside: avoid;
    page-break-after: auto;
}

thead {
    display: table-header-group
}

th,
td,
div {
    border: 1px solid #000;
}

th,
td {
    height: 60px;
}

div.footer {
display: none;
}

@media print {
div.footer {
    display: block;
    position: fixed;
    bottom: 0px;
    height: 45px;
}
}
<table>
    <thead>
        <tr>
            <th>
                th
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
    </tbody>

</table>

<div class='footer'>
    <label style='font-family:verdana;font-size:10px;font-weight:bold;'>Assinatura: _______________________________________________<br>Por ser verdade, assino e dou fé ao presente documento</label>
    <div id='pages' class='pages'></div>
</div>

2
  • Não deu muito certo cara. Os td tem alturas variáveis conforme o número de dados. Até apliquei a altura fixa somente nos td de dentro, abaixo do cabeçalho pra não mexer com o resto. O @media eu especifiquei na abertura do <style>, que funciona da mesma forma. Se tiver outra ideia agradeço.
    – A52
    16/10/2019 às 13:05
  • @A52 cara nesse caso não vou conseguir te ajudar muito
    – hugocsl
    16/10/2019 às 14:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .