I have added around 50 row in the same table. After that content overlapping the footer.
Data 15 is showing but Data 16 and Data 17 are missing
Footer should visible all page in the bottom.
Example : In hospital printing discharge summary have footer all the pages. i ma try to achieve but not working
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Printable Document with Footer</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 50px;
padding: 0;
padding-bottom: 140px; /* Ensure enough space between table and footer */
display: grid;
grid-template-rows: auto 1fr auto; /* Header, Content, Footer */
min-height: 100vh;
}
.container {
width: 100%;
margin-bottom: 20px; /* Space between container and footer */
}
.footer {
background-color: #333;
color: #fff;
text-align: center;
line-height: 100px;
margin-top: 20px; /* Space between container and footer */
}
.table-wrapper {
overflow: hidden; /* Ensure table doesn't overlap footer */
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
@media print {
.footer {
display: block;
position: fixed;
bottom: 0;
width: 100%;
height: 100px; /* Adjust height as needed */
visibility: visible !important; /* Ensure footer is visible on every printed page */
margin-top: 20px; /* Space between container and footer */
}
body {
padding-bottom: 500px; /* Adjust padding-bottom to create space for footer */
}
}
</style>
</head>
<body>
<div class="container">
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<!-- Example of a long table -->
<!-- Add more rows as needed -->
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 2</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 5</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 6</td>
<td>Data 2</td>
<td>Data 3</td>
</tr><tr>
<td>Data 7</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 8</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 9</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 10</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 12</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 13</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 14</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 15</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 16</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 17</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 18</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 19</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 20</td>
<td>Data 2</td>
<td>Data 3</td>
</tr><tr>
<td>Data 21</td>
<td>Data 2</td>
<td>Data 3</td>
</tr><tr>
<td>Data 22</td>
<td>Data 2</td>
<td>Data 3</td>
</tr><tr>
<td>Data 23</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 24</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 25</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 26</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 27</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 28</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 29</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 30</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr><tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<!-- Add more rows as needed -->
<!-- This table will automatically split across pages -->
</tbody>
</table>
</div>
</div>
<div class="footer">
Footer Content - This will appear on every printed page.
</div>
</body>
</html>
`
It should work on while print this web page
