Hey there, I'm having an issue with printing a large table on my HTML page. I want the footer to appear at the very bottom of every printed page, but so far I haven't found a perfect solution. I came across using tfoot, which prints the footer at the bottom of every page except the last one. Here are some examples:
[tfoot example-1][1]
[tfoot example-2][2]
Another solution I found was using position fixed, but it ended up covering the last row of the table. Examples are shown here:
[Position fixed example-1][3]
[Position fixed example-2][4]
Here is the CSS style I've been using:
thead{
display: table-header-group;
}
tfoot{
display: table-footer-group;
}
tr,td{
border: 1px solid;
page-break-inside: avoid;
}
.footer{
position: fixed;
bottom: 0;
text-align:center;
width: 100%;
padding-top: 10px;
}
@media print {
tr {
page-break-inside: avoid;
}
}
If anyone has a solution to either of these problems or knows of a solution I haven't tried yet, I would greatly appreciate the help. [1]: https://i.sstatic.net/DWCZ2.png [2]: https://i.sstatic.net/mkQAb.png [3]: https://i.sstatic.net/vTpam.png [4]: https://i.sstatic.net/t0LQu.png