I have been trying different methods, but none of them seem to work properly. My issue is with printing a html report with a header and footer on every page specifically in Firefox.
A Possible Solution:
<html>
<head>
<title></title>
<style type="text/css">
@media print {
#footer {
display: block;
position: fixed;
bottom: 0;
}
}
</style>
</head>
<body>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="width:100%"> header content </th>
</tr>
</thead>
<tfoot>
<tr>
<td width="100%"><table width="100%" border="0">
<tr>
<td colspan="4"><br>
</td>
</tr>
</table>
<tfoot>
<tbody>
<tr>
<td width="100%"> main content </td>
</tr>
</tbody>
</table>
<table id="footer" width="100%">
<tr>
<td width="100%"> footer content </td>
</tr>
</table>
</body>
</html>
Potential Issue with Solution: The main content might overlay the footer.
Another Alternative:
<html>
<head>
<title/>
<style type="text/css">
@media print {
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
}
@media screen {
thead {
display: block;
}
tfoot {
display: block;
}
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>header content</td>
</tr>
</thead>
<tbody>
<tr>
<td> main content </td>
</tr>
</tbody>
<tfoot>
<tr>
<td>footer content</td>
</tr>
</tfoot>
</table>
</body>
</html>
Possible Issue with this Alternative: The footer may not always appear at the bottom of the page as desired.
If you have any helpful suggestions or other solutions, they would be greatly appreciated!
Thank you