css - Adding Header/footer while printing html page -


i've created html page header,some content , footer. tried print of html page, , there 2 pages. got header in first page , footer in last page.

what need header , footer show in pages in word document.

you need wrap whole content inside table, like:

html

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

... , add following css:

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

i need add, may not work in webkit-based browsers (as of now) safari, chrome , opera. please test on browsers want support.
chrome may support option: set header , footer position:fixed, wasn't able avoid overlapping page content (i.e. long text on more 1 page) in quick tests.


addendum
may have content elements wish not break upon page-break - e.g. list items spanning multiple lines of text. avoid can set following css:

-webkit-column-break-inside: avoid; /* chrome, safari, opera */           page-break-inside: avoid; /* firefox */                break-inside: avoid; /* ie 10+ */ 

Comments