When printing HTML I want to place footer table to the bottom of the page. In case of single page it works as expected but for multiple pages the footer section is printed in bottom of all pages. But for multiple pages I want to print footer table only on bottom of last page. Below is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document with Tables</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
height: 100vh;
display: flex;
flex-direction: column;
}
.header, .footer {
width: 100%;
border: 1px solid #000;
padding: 10px;
box-sizing: border-box;
}
.body {
flex: 1;
overflow: auto;
}
table {
width: 100%;
border-collapse: collapse;
margin: 10px 0;
}
th, td {
border: 1px solid #000;
padding: 8px;
text-align: left;
}
/* Print styles */
@media print {
body {
height: auto; /* Allow body to expand */
margin: 0;
}
.body {
overflow: visible;
}
/* Show footer only on the last page */
.footer {
display: block; /* Make it visible on the last page */
position: fixed;
bottom: 0;
width: 100%;
}
@page {
size: auto;
margin: 0;
}
}
</style>
</head>
<body>
<!-- Header Table -->
<table class="header">
<tr>
<th colspan="3">Header Section</th>
</tr>
</table>
<!-- Body Table -->
<div class="body">
<table id="bodyTable">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<!-- Add dynamic rows here -->
<!-- Example rows -->
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td><td>Row 1 Data 3</td></tr>
<!-- Add more rows as necessary -->
</tbody>
</table>
</div>
<!-- Footer Table -->
<table class="footer" id="footerTable">
<tr>
<td>Signature Section</td>
</tr>
</table>
</body>
</html>
single page print looks like 
multiple pages print looks like 
I have also tried to initially hide the footer section and display footer inside onbeforeprint but still same issue for multiple pages.