How to Print Custom Headers and Footers in a Web Report Without Using JavaScript?

Printing Custom Headers and Footers on Each Page

When generating web-based reports for print, it can be desirable to include custom headers and footers on each page. However, it was initially assumed that this functionality was not possible in the browser window.

Despite previous research, a possible solution emerged through the use of tables. By styling the table elements using CSS, the header and footer can be positioned using the thead and tfoot tags, respectively.

<table style="display: table">
  <thead style="display: table-header-group">
    <tr><td>Your header goes here</td></tr>
  </thead>
  <tfoot style="display: table-footer-group">
    <tr><td>Your footer goes here</td></tr>
  </tfoot>
  <tbody>
    <!-- Report body -->
  </tbody>
</table>

To ensure that the header and footer are only visible on printed media, CSS media queries can be implemented:

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

Initially, this solution was expected to work only in Firefox and Internet Explorer. However, recent updates have extended its compatibility to Chrome and Safari.

This table-based approach provides a viable workaround for printing custom headers and footers on each page, even with limited CSS support in Internet Explorer 6.

The above is the detailed content of How to Print Custom Headers and Footers in a Web Report Without Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!