How to use HTML to print header and footer on every printed page of a document?

Question

Is it possible to print HTML pages with custom headers and footers on each printed page?

I\'d like to add the word \"UNCLASSIFIED\" in Red, Arial, size 16pt to the t

Answer 1

Muhammad Musavi's comment is the best answer, so here it is surfaced as an actual Answer:

thead/tfoot are automatically repeated on the top and bottom of each page. However, tfoot isn't sticky to the bottom of the last page.

position: fixed in print will repeat on each page, and the footer will stick to the bottom of all pages including the last one - but, it won't create space for its contents.

Combine them:

HTML:

(repeated header)

 


(content goes here)

 

(repeated footer

CSS:

@page {
    size: letter;
    margin: .5in;
}

@media print {
    table.paging thead td, table.paging tfoot td {
        height: .5in;
    }
}

header, footer {
    width: 100%; height: .5in;
}

header {
    position: absolute;
    top: 0;
}

@media print {
    header, footer {
        position: fixed;
    }
    
    footer {
        bottom: 0;
    }
}

There are a lot of niceties you can add in here, but I've intentionally slashed this to the bare minimum to get a cleanly rendering header and footer, appearing once on-screen and at the top and bottom of every printed page.

https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a