After implementing the solution found at this Stack Overflow post, I was able to display the header on every page. However, when the height of the header increases, it no longer repeats as expected!
I'm wondering if there is a specific limitation on how many times the thead can be repeated? And if there is, how can I adjust or increase that limit?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function PrintPage() {
document.getElementById('print').style.display = 'none';
window.resizeTo(960, 600);
document.URL = "";
window.location.href = "";
window.print();
}
</script>
<style type="text/css" media="print">
@page {
size: auto;
/* auto is the initial value */
margin: 2mm 4mm 0mm 0mm;
/* this affects the margin in the printer settings */
}
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
</style>
<style type="text/css" media="screen">
thead {
display: block;
}
tfoot {
display: block;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width: 500px; margin: 0 auto;">
<thead>
<tr>
<td>
<p>header comes here for each page</p>
</td>
</tr>
</thead>
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
</tbody>
<tfoot>
<tr>
<td>
footer comes here for each page
</td>
</tr>
</tfoot>
</table>
</div>
<br clear="all" />
<input type="button" id="print" name="print" value="Print" onclick="javascript:PrintPage();" class="button" />
</form>
</body>
</html>