How to add Print headers and footers in HTML, CSS and JavaScript?

Question

I have a document in HTML and CSS. I would like to have headers and footers in every printed page so that when you press Print, each page has the same footer and header. Is there a way to do this using web technologies? I can't find much information on printing besides page-break-after and so on.

There's not support for this per se in web technologies. What you can try doing is this: (1) have <div> for header and another for footer on your pages, (2) define different stylesheets for display and print; (3) in display stylesheet, set display:none for those divs; (4) in print stylesheet, set display:block. — Aleks G
– Aleks G, Commented Jul 12, 2011 at 13:20

Tower · Accepted Answer · 2011-07-16 10:05:21Z

6

This is what I found out:

You can use position: fixed and top: 0 or bottom: 0 to position an element in top/bottom of each page. However, since fixed positioning does not work on IE6, the only choice for that is to use a table with 100% height and thead and tfoot. It is some sort of magic that works the way you want it to (to have the contents of thead and tfoot to appear on each page). If you don't care about IE6 just use fixed positioning.

However, fixed positioning also means that any content you have there may go behind the fixed positioned element. So, in effect, the header and the footer does not occupy any space.

You can't control the actual header/footer (e.g. the URL that is printed). The user has to disable those himself/herself.

The best alternative to painful HTML/CSS printing is PDF. You can control how each page look like, what's the size of them and header/footer. The drawbacks are slower prints (generating PDF is not as fast as loading a HTML page) and the pain of working your way with some PDF library.

answered Jul 16, 2011 at 10:05

Tower

103k132 gold badges366 silver badges523 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eric Over a year ago

Often, you can cover the original header and footer by placing the CSS ones over the top.

Shef · Accepted Answer · 2011-07-12 13:31:28Z

0

You CAN'T set the header and footer, it's the browser which handles that part.

answered Jul 12, 2011 at 13:31

Shef

45.6k15 gold badges82 silver badges91 bronze badges

1 Comment

Sankar Over a year ago

Sir is there any way to print. Atleast 15 records per page is possible.Give some tips ...

Collectives™ on Stack Overflow

How to add Print headers and footers in HTML, CSS and JavaScript?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related