0

Estou tendo um problema para gerar um arquivo para impressão utilizando a estrutura de tabela. Eu consigo colocar o cabeçalho com thead e rodapé tfoot em todas as páginas, mas o conteúdo do tbody sobrepõe os dois. Segue o código:

<html>
    <head>       
        <style type="text/css" media="print">
            thead tr{
                display: block;
            }
            table{
                margin-left: 3cm;
                margin-right: 2cm;
            }           
            table td{
                font-family: arial;
                font-size: 18px;
                text-align: justify;
                line-height: 1.5;
            }
            thead{
                display: table-header-group;
                position: fixed;
            }   
            tfoot{
                display: table-footer-group;
                position:fixed;
                bottom:0;
            }        
            tfoot td{
                font-family: Times New Roman;
                font-size: 12px;
                line-height: 1.2;
                border-top: 3px solid black;
                text-align: left;
            }   
        </style>
    </head>
    <body> 
        <div class="conteudodatabela">
            <table cellspacing="0">
                <thead>
                    <tr> 
                        <td width="100%">
                            <img width='585px' height='100px' align='center' src='../images/logo.png'/>
                            <br />
                            <p align='right'>
                                Lorem ipsum dolor sit amet,
                                <br />
                                26 de Setembro de 2017.
                            </p>
                            <br />
                        </td>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <td colspan="5">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis sodales quam.<br />
                            Nulla ac enim et velit scelerisque ullamcorper.<br />
                            Quisque consequat quam pellentesque posuere porta.<br />
                            Nunc condimentum interdum lectus eu eleifend.
                        </td>
                    </tr>
                </tfoot>
                <tbody>
                    <tr> 
                        <td>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis sodales quam.
                            Nulla ac enim et velit scelerisque ullamcorper.
                            Quisque consequat quam pellentesque posuere porta.
                            Nunc condimentum interdum lectus eu eleifend.
                            Vestibulum pellentesque pretium nunc et viverra.
                            Cras eget sapien augue. Vestibulum et consequat sem.
                            Sed aliquam justo in mi rutrum lobortis.
                            Ut rutrum mi sit amet eros congue luctus.
                            Aenean dignissim risus vel ipsum placerat condimentum nec eget justo.

                            Pellentesque eget libero lobortis, sollicitudin urna sed, malesuada nibh.
                            Mauris vehicula ornare augue, nec placerat odio viverra in.
                            Mauris eu consequat nisi. Duis iaculis porta facilisis.
                            Suspendisse potenti. Maecenas venenatis sit amet elit ac aliquet.
                            Sed eget malesuada diam, ac elementum neque. Quisque pharetra eros aliquet libero maximus pharetra.
                            Aliquam in maximus arcu. Maecenas tristique mauris metus.
                            Fusce facilisis, felis ut auctor commodo, dolor purus vestibulum magna, quis varius felis felis a libero.
                            Nullam at est euismod, semper sapien non, volutpat libero. Sed ut lorem felis.
                            Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                            Sed tellus nunc, maximus eget placerat vel, tincidunt a quam.
                            Vestibulum blandit erat a mi facilisis viverra non quis orci.       
                            <p align='center'>
                                Atenciosamente, <br />
                                Lorem ipsum<br />
                                Consectetur adipiscing elit<br />
                                Pellentesque quis sodales quam<br />
                                Suspendisse potenti.<br />
                                Nullam at est euismod<br />
                            </p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>

Eu tentei colocar display da thead e da tfoot como block, mas também não funcionou.

1 Resposta 1

1

Lucas,

o tbody está sobrepondo o por causa dos position: fixed do seu código, tira eles que vai funcionar, se você estiver usando o chrome para testar o tfoot vai aparecer apenas na ultima página, eles estão ajustando isso ainda, você pode seguir o processo pelo https://bugs.chromium.org/p/chromium/issues/detail?id=656232

thead{
    display: table-header-group;
}   
tfoot{
    display: table-footer-group;
    bottom:0;
}     

EDIT

lucas, fiz um ajuste, mas continua não funcionando no chrome, no edge funciona normalmente.

<html>
    <head>       
        <style type="text/css" media="print">
            thead tr{
                display: block;
            }
            table{
                margin-left: 3cm;
                margin-right: 2cm;
            }           
            table td{
                font-family: arial;
                font-size: 18px;
                text-align: justify;
                line-height: 1.5;
            }
            thead{
                display: table-header-group;


            }   
            tfoot{
                display: table-footer-group;
                /* position: fixed; */
                bottom:0;
            }        
            tfoot td{
                font-family: Times New Roman;
                font-size: 12px;
                line-height: 1.2;
                border-top: 3px solid black;
                text-align: left;
            }   



            #spacer {height: 8em;} /* height of footer + a little extra */
             #footer {
                position: fixed;
                bottom: 0;
             }


        </style>
    </head>
    <body> 
        <div class="conteudodatabela">
            <table cellspacing="0">
                <thead>
                    <tr> 
                        <td width="100%">
                            <img width='585px' height='100px' align='center' src='../images/logo.png'/>
                            <br />
                            <p align='right'>
                                Lorem ipsum dolor sit amet,
                                <br />
                                26 de Setembro de 2017.
                            </p>
                            <br />
                        </td>
                    </tr>
                </thead>
                  <tfoot>
    <tr>
      <td id="spacer"></td>
    </tr>
  </tfoot>
            <!--
                <tfoot>
                    <tr>
                        <td colspan="5">
                            Foot - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis sodales quam.<br />
                            Nulla ac enim et velit scelerisque ullamcorper.<br />
                            Quisque consequat quam pellentesque posuere porta.<br />
                            Nunc condimentum interdum lectus eu eleifend.
                        </td>
                    </tr>
                </tfoot>

            -->
                <tbody>
                    <tr> 
                        <td>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis sodales quam.
                            Nulla ac enim et velit scelerisque ullamcorper.
                            Quisque consequat quam pellentesque posuere porta.
                            Nunc condimentum interdum lectus eu eleifend.
                            Vestibulum pellentesque pretium nunc et viverra.
                            Cras eget sapien augue. Vestibulum et consequat sem.
                            Sed aliquam justo in mi rutrum lobortis.
                            Ut rutrum mi sit amet eros congue luctus.
                            Aenean dignissim risus vel ipsum placerat condimentum nec eget justo.

                            Pellentesque eget libero lobortis, sollicitudin urna sed, malesuada nibh.
                            Mauris vehicula ornare augue, nec placerat odio viverra in.
                            Mauris eu consequat nisi. Duis iaculis porta facilisis.
                            Suspendisse potenti. Maecenas venenatis sit amet elit ac aliquet.
                            Sed eget malesuada diam, ac elementum neque. Quisque pharetra eros aliquet libero maximus pharetra.
                            Aliquam in maximus arcu. Maecenas tristique mauris metus.
                            Fusce facilisis, felis ut auctor commodo, dolor purus vestibulum magna, quis varius felis felis a libero.
                            Nullam at est euismod, semper sapien non, volutpat libero. Sed ut lorem felis.
                            Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                            Sed tellus nunc, maximus eget placerat vel, tincidunt a quam.
                            Vestibulum blandit erat a mi facilisis viverra non quis orci.       

                            Pellentesque eget libero lobortis, sollicitudin urna sed, malesuada nibh.
                            Mauris vehicula ornare augue, nec placerat odio viverra in.
                            Mauris eu consequat nisi. Duis iaculis porta facilisis.
                            Suspendisse potenti. Maecenas venenatis sit amet elit ac aliquet.
                            Sed eget malesuada diam, ac elementum neque. Quisque pharetra eros aliquet libero maximus pharetra.
                            Aliquam in maximus arcu. Maecenas tristique mauris metus.
                            Fusce facilisis, felis ut auctor commodo, dolor purus vestibulum magna, quis varius felis felis a libero.
                            Nullam at est euismod, semper sapien non, volutpat libero. Sed ut lorem felis.
                            Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                            Sed tellus nunc, maximus eget placerat vel, tincidunt a quam.
                            Vestibulum blandit erat a mi facilisis viverra non quis orci.   

                            Pellentesque eget libero lobortis, sollicitudin urna sed, malesuada nibh.
                            Mauris vehicula ornare augue, nec placerat odio viverra in.
                            Mauris eu consequat nisi. Duis iaculis porta facilisis.
                            Suspendisse potenti. Maecenas venenatis sit amet elit ac aliquet.
                            Sed eget malesuada diam, ac elementum neque. Quisque pharetra eros aliquet libero maximus pharetra.
                            Aliquam in maximus arcu. Maecenas tristique mauris metus.
                            Fusce facilisis, felis ut auctor commodo, dolor purus vestibulum magna, quis varius felis felis a libero.
                            Nullam at est euismod, semper sapien non, volutpat libero. Sed ut lorem felis.
                            Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                            Sed tellus nunc, maximus eget placerat vel, tincidunt a quam.
                            Vestibulum blandit erat a mi facilisis viverra non quis orci.   
                            <p align='center'>
                                Atenciosamente, <br />
                                Lorem ipsum<br />
                                Consectetur adipiscing elit<br />
                                Pellentesque quis sodales quam<br />
                                Suspendisse potenti.<br />
                                Nullam at est euismod<br />
                            </p>
                        </td>
                    </tr>
                </tbody>
            </table>

            <div id="footer">
                Foot - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis sodales quam.<br />
                Nulla ac enim et velit scelerisque ullamcorper.<br />
                Quisque consequat quam pellentesque posuere porta.<br />
                Nunc condimentum interdum lectus eu eleifend.
            </div>
        </div>
    </body>
</html>
3
  • Fiz as alterações que você falou e testei em outro navegador e deu certo. Mas como faço para colocar o rodapé no final, sem o position: fixed? Na última página ele sobe para onde o texto termina. Commented 26/09/2017 às 14:33
  • 1
    lucas editei a solução. Commented 26/09/2017 às 15:28
  • Rodei seu código no Firefox. A aparência ficou melhor, mas o rodapé continuou em cima, onde o texto acaba. O problema é que estou usando o Debian como sistema operacional no momento, então consigo testar no Edge. Commented 26/09/2017 às 16:10

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 .