my problems are first when i tried using this what i wanted to do is to print all my pages with header and footer.. sample if i have 5pages that needed to be printed header and footer will be displayed in all pages.. so when i tried using this approach what happens is only the header is being displayed in all pages and footer is only displayed in last page.. which is not what i really wanted...
@media print {
thead { display: table-header-group; }
tbody { display: table-row-group; }
tfoot { display: table-footer-group; }
}
@media screen {
thead { display: none; }
tfoot { display: none; }
}
<table>
<thead>
<tr>
<td>
<!----HEADER CONTENT----->
</td>
</tr>
</head>
<tfoot>
<tr>
<td>
<!----FOOTER CONTENT----->
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
<!----FOOTER CONTENT----->
</td>
</tr>
</tbody>
</table>
next problem was when i tried opening my page on a tablet and making test print what happen is header is only displayed on the 1st page and footer displayed on the last page.. which is different when i access my page on a pc... any idea on how to fix this?.. im currently using google chrome version: 58.0.3029.110 (64-bit)..
when i tried using IE and mozilla firefox the header doesn't show up in all pages only on the first page but the footer displayed in all pages.. unlike when i open chrome header is being displayed in all pages but footer only displayed on the last page.. also when i tried accessing it on a tablet nothing seems to work.. like header is displayed on the first page and footer is displayed on the last page saying i have 5pages. is there any possible way to solve this?. cuz i think this have been an issue since 2010..