HTML Header and footer on all pages when printing an html document

Question

I created an html page with a header, some content and a footer. I tried to get a printout of an HTML page, and there were 2 pages. I got the header on the first page and the footer on the last page.

What I really need is the header and footer displayed on all pages, for example, in a text document.

I checked and found that using the table format with thead and tfoot, this can be done. It worked in firefox and IE, but did not work in chrome. Is it a webkit browser compatibility issue?

Is there any other way compatible with all browsers.

Answer 1

You can customize print styles specifically with the "@print" media file style definition. This will allow you to create separate styles strictly for printing a document and for previewing.

I would start with this as a solid foundation.

@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 positional elements that you activate with the type of print medium:

 #header, #footer { display: none; } @media print { #header, #footer { position: fixed; display: block; top: 0; } #footer { bottom: 0; } } 

(It is assumed here that you have div elements with id header and footer ).

Answer 3

I had the same problem and I found simple tags to work better 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 contents of the <thead> repeated on each page. CSS is not 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 need to switch to "Page View" to see the difference in Word).

Answer 4

None of the above answers are actually the answer to the question asked. In my experience, there is currently no single clean solution. Feel how chrome purposefully avoids this error. https://bugs.webkit.org/show_bug.cgi?id=17205 .