TBODY content overwriting THEAD and TFOOT

0

I'm having a problem generating a file for printing using the table structure. I can put the header with thead and footer tfoot on all pages, but the tbody content overlaps both. Here is the code:

<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>

I tried to put the thead and tfoot as the block , but it did not work either.

    
asked by anonymous 26.09.2017 / 14:58

1 answer

1

Lucas,

tbody is overlapping because of position: fixed of your code, strip them that it will work, if you are using chrome to test tfoot will only appear on the last page, they are adjusting it yet, you can follow the process by link

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

EDIT

Lucas, I made an adjustment, but it still does not work in chrome, the edge works normally.

<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>
    
26.09.2017 / 15:53