I am facing a challenge with printing a table that has a variable number of rows via browsers. I need to ensure that the table is followed by a div which remains at the bottom of each page, adjusting its position according to the table's overflow onto subsequent pages. Initially, I tried implementing this using HTML as shown below:
.footer{
width: 100%;
position: absolute;
bottom: 0;
font-size: 10pt;
}
However, this approach did not work as expected, as the footer remained on the first page. Any assistance would be greatly appreciated!
UPDATE
In an attempt to resolve the issue, I grouped the table and footer within a parent div so they could interact accordingly. This ensures that a footer always appears on the same page as the end of a table. Apologies for any confusion caused earlier!
SOLUTION [UPDATED]
After further adjustments, I was able to successfully address the problem by enclosing the footer within another div and applying the following CSS styling:
.table{
min-height: 20cm !important;/* Set the height for the table in cm or mm (px and % resulted in issues) */
display: block;
position: relative;
width: 100% !important;
}
.footer{
width: 100%;
position: relative;
margin-bottom: 0 !important;
font-size: 10pt;
page-break-inside: avoid !important;
page-break-before: auto !important; /* Moves the footer to the bottom of the next page if the table overflows */
}
The only outstanding concern now is when the table perfectly fits the first page - the footer gets pushed to the top of the next page :( A big thank you to everyone who contributed their insights! :)