2

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.

Savera
  • 31
  • 1
  • 3
  • 3
    you might be looking for [this](http://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page-of-a-document-w) – Rohit Kishore Aug 01 '16 at 12:25

2 Answers2

2

You need to wrap your whole content inside a table, like:

HTML

<table>
    <thead>
        <tr><td>
            <!-- your header goes here -->
        </td></tr>
    </thead>
    <tbody>
        <tr><td>
            <!-- your content goes here -->
        </td></tr>
    </tbody>
    <tfoot>
        <tr><td>
            <!-- your footer goes here -->
        </td></tr>
    </tfoot>
</table>

... and add the following CSS:

@media print {
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
}
@media screen {
    thead { display: block; }
    tfoot { display: block; }
}

 

I need to add, that this may not work in webkit-based browsers (as of now) as Safari, Chrome and Opera. Please test it on all browsers you want to support.
Chrome may support another option: to set header and footer to position:fixed, but I wasn't able to avoid overlapping with the page content (i.e. very long text over more than one page) in my quick tests.

addendum
You may have content elements you wish to not break upon page-break - e.g. list items spanning multiple lines of text. To avoid this you can set the following CSS:

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
          page-break-inside: avoid; /* Firefox */
               break-inside: avoid; /* IE 10+ */
Seika85
  • 1,981
  • 2
  • 18
  • 29
-3

There is new css trick @media print

So you just create your header and footer and hide them on the main page when is not printing. Just add to the css display:none

When its time for printing you can add media to your css and display back the hidden footers and headers with:

@media print {
  #id{
     display:block;
  }
}

also check this "CSS page-break-after Property" it will give you the power to break pages

TreantBG
  • 1,192
  • 6
  • 25
  • 44
  • May you please add the answer on how to print header and footer on EVERY page? For example if you have a really long text which spans over more than one page. --- As I understand your answer, you would have to kind of setup your HTML to a specific print layout: elements not overlapping page borders, and the correct amount of headers/footers the print would need, wouldn't you? – Seika85 Aug 01 '16 at 12:52
  • you can play with css for satisfying result. .page{ height:958px } .page .content { min-height:###px; }. Adjust content min-height and var content_height according to your header/footer height. – TreantBG Aug 02 '16 at 11:27
  • also in addition the tables have some advantage in printing. here is some info http://www.terminally-incoherent.com/blog/2009/10/12/repeating-html-table-headers-on-each-printed-page/ – TreantBG Aug 02 '16 at 11:30
  • Your last comment (with link) is exactly what I posted as answer. Your other solution would require a fixed print layout, where the user would only be able to have a good result on a single defined page layout. But you don't know how the user wants to print your website. So it's (in my opinion) bad practice to assume the user would print in a specific page layout (or even force him to do so). I'm not saying it does not work, it's just not good practice in my eyes. – Seika85 Aug 02 '16 at 11:48
  • `@media print` is NEW?? –  Feb 23 '17 at 13:21
  • perhaps now its not :) – TreantBG Feb 27 '17 at 15:31