HTML Header and footer in all pages while printing html document - html

Question

I've created a html page with a header,some content and a footer. I tried to get a print of the HTML page, and there was 2 pages. I got the header in first page and the footer in the last page.
What i really need is the header and footer to show in all the pages like in a word document.
I checked and found that using the table format with the thead and tfoot,it can be done.
It worked in firefox and IE, but it's not working in chrome. Is this some webkit browser compatibility problem??
Is there any other way which is compatible with all browsers.
Update: As of April 2021, the bug is still open https://bugs.webkit.org/show_bug.cgi?id=17205. as mentioned below by SHAKU here https://stackoverflow.com/a/34884220/2776433

Answer 1

You can target print styles specifically with the "#print" css media style definition. This will allow you to create individual styles strictly for when the document is being printed, and in print preview.
I would start with this as a solid base.
#media print {
* {
color: #000 !important;
-webkit-text-shadow: none !important;
text-shadow: none !important;
font-family: "Times New Roman", Times, serif;
background: transparent !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border: none!important;
font-weight: normal!Important;
}
header, nav, footer {
overflow:visible;
}
.body {
width: auto;
border: 0;
margin: 0 5%;
padding: 0;
float: none !important;
}
a, a:link, a:visited {
&[href]:after {
content: " (" attr(href) ") ";
font-size: 90%;
}
&[href^="javascript:"],
&[href^="#"] {
&:after {
content: "";
}
}
}
abbr[title]:after {
content: " (" attr(title) ")";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
#page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}

Answer 2

Use fixed positioned elements that you activate with print media type:
#header, #footer {
display: none;
}
#media print
{
#header, #footer {
position: fixed;
display: block;
top: 0;
}
#footer {
bottom: 0;
}
}
(Here assuming you have div elements with id header and footer).

Answer 3

I had the same problem and found simple tags to work best for me.
<table>
<thead>
<tr><td>
content that should be printed as page header
</td></tr>
</thead>
<tbody>
<tr><td>
content that will be spread over all pages consecutively
</td></tr>
</tbody>
</table>
The table will look like a simple table in the browser, but in printouts the content of the <thead> tag is repeated on each page. No CSS required.
Tested in Firefox 32, IE 11 and even in MS Word 2010. Word does not translate the tag into "real" page headers, but repeats the content on top of each page. (You may have to switch to "Page View" to actually see the difference in Word).

Answer 4

none of the above answers are not really the answer for the question asked. From my experience there is no single clean solution right now available. Feel like chrome is purposefully avoiding this bug. https://bugs.webkit.org/show_bug.cgi?id=17205.