Currently, I am attempting to create a report using HTML and CSS. The structure of my template includes a header, content section, and footer. My goal is to have the headers and footers repeat across all pages similar to standard reports.
This is what my CSS code looks like:
Header:
@media print {
div.report-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
padding-bottom: 15px;
border-bottom: 2px solid #000034;
}
}
Footer:
@media print {
div.report-header {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
padding-bottom: 15px;
border-bottom: 2px solid #000034;
}
}
When testing the report on Firefox, it functions as expected with the headers and footers repeating on every page. However, when viewed in Chrome, the header appears only on the first page, while the footer only shows up on the last page.
I've tried various tutorials, including utilizing Tables:
@media print {
thead { display: table-header-group; width: 100%; background: red;}
tfoot { display: table-footer-group; width: 100%; background: green;}
}
Despite these efforts, the issue persists, working correctly on Firefox but not on Chrome. Is there a specific solution or plugin that can help achieve this simple report layout consistently?
My current browser version is Chrome Version 24.0.1312.70.