How can I achieve consistent printing of custom headers and footers on every page of a web report?-CSS Tutorial-php.cn

How can I achieve consistent printing of custom headers and footers on every page of a web report?

Barbara Streisand

Release： 2024-10-25 11:42:02

Original

870 people have browsed it

How can I achieve consistent printing of custom headers and footers on every page of a web report?

Printing Web Page Headers and Footers on Every Page

The possibility of printing custom headers and footers on every page of a printed web report was once believed to be unattainable. However, recent advancements in browser capabilities have made this a reality, particularly in the case of Mozilla Firefox and Internet Explorer.

Using Tables to Achieve Page Grouping

As an effective approach, it is possible to utilize tables in combination with CSS styling to achieve the desired result. By implementing the following CSS styles:

thead { display: table-header-group; }
tfoot { display: table-footer-group; }

Copy after login

you can designate specific table elements as headers or footers. This allows them to be repeated on each printed page.

Example HTML Structure

To implement this technique, structure the HTML as follows:

<code class="html"><body>
<table>
    <thead><tr><td>Your header goes here</td></tr></thead>
    <tfoot><tr><td>Your footer goes here</td></tr></tfoot>
    <tbody>
        <tr><td>
        Page body in here -- as long as it needs to be
        </td></tr>
    </tbody>
</table>
</body></code>

Copy after login

Handling Printed Media

To ensure these elements are only displayed in print, utilize the @media rule:

<code class="css">@media print {
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
}

@media screen {
    thead { display: none; }
    tfoot { display: none; }
}</code>

Copy after login

This will suppress the header and footer display on the screen while maintaining their presence in printed documents.

Support and Browser Considerations

As of 2015, this technique remains effective in Mozilla Firefox and Internet Explorer. Webkit-based browsers (e.g., Chrome, Safari) previously experienced issues in this area. However, recent updates have alleviated these problems in Chrome. Consult the bug reports provided below for further information:

[WebKit Bug 17205](https://bugs.webkit.org/show_bug.cgi?id=17205)
[Chromium Issue 24826](https://code.google.com/p/chromium/issues/detail?id=24826)
[Chromium Issue 99124](https://code.google.com/p/chromium/issues/detail?id=99124)

The above is the detailed content of How can I achieve consistent printing of custom headers and footers on every page of a web report?. For more information, please follow other related articles on the PHP Chinese website!