HTML Header and footer in all pages while printing html document

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

• feeela: It's a bit unclear what you are doing. You have tagged the question with HTML5 and talked about some header and footer (which could be <header> and <footer> elements) but then mention <thead> and <tfoot>.
• Bennet Sam: i used <header> and <footer> to create the header and footer.but when i tried to print the html page.the header came in one page and footer in another page.So i changed that and used thead for header and tfoot for footer,for getting a header and footer like that we see in word documents, only when printing. I hope u r getting a clearer pic
• feeela: Not really as thead and tfoot are table element and thus your whole layout seems to be realized as table-layout. Nonetheless you can control page breaks be one of the CSS page-break-* properties.
• Bjorn Smeets: Check this out: stackoverflow.com/questions/1360869/html-print-header-footer
• Bennet Sam: @feeela : Correct me if I'm wrong ,but CSS page-break-* properties are used for page-break. What i'm looking for is a way to get the header and footer of an HTML doc to come in all the pages while printing.

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).

• Bennet Sam: Thanks for the answer.I tried this. For an html which prints only one page,its working fine. The header and footer comes at top and bottom perfectly. But when there is more than one page, the footer comes in the last page when print.
• user1693593: @BennetSam and if you insert an element like: <div style="page-break-before: always;"></div> at the places you want to break the content? (you should also be able to style the div further as well). This of course forces breaks at certain points instead if having the browser determine the breaks.

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).

• Marko: As of January 4th, 2016 this does work in Firefox and IE but Chrome unfortunately does not repeat thead tags on each printout page
• Irikos: Works fine in Chrome, Firefox and even MS-Word. I'm trying to make Tfoot work in a similar way, and it does in browsers, but not in MS-Word. Any suggestions?

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.

• isapir: It was only reported 8 years ago... They're very busy... Give them some time.