0
I am having a problem generating a printable file using the table structure. I can put the header with thead and footer tfoot on all pages, but the contents of tbody superimposes the two. Follows 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 display of thead and of tfoot as block, but it didn’t work either.
I made the changes you talked about and tested in another browser and it worked. But how do I put the footer at the end without the position: Fixed? On the last page it goes up to where the text ends.
– Lucas Ramos
Lucas edited the solution.
– Thiago Sussumu Sato
I ran your code in Firefox. It looked better, but the footer continued up, where the text ends. The problem is that I am using Debian as an operating system at the moment, so I can test on Edge.
– Lucas Ramos