Customize the print header/footer output for HTML pages

2
votes

Is there a way to customize the text that is printed on the header and footer of every HTML page that you print, where the page number, URL, date, etc is printed ? (if you choose to print the headers and the footer from the print options).

The other solutions to display a header and a footer on every print page (using thead/tfoot and fixed positioned divs) don't seem to work on Chrome.

Here are the print headers and footers highlighted on a print preview for google.com: enter image description here

1
javascripthtmlcssprinting

1 Answers

-1
votes

Try this:

@media screen {
  .print {
      display: none;
  }
}

@media print {
  .print {
      display: block;
  }
}

And add the .print class to the appropriate element or elements.