How Can I Repeat Table Headers on Each Page When Printing?

Repeating Table Headers in Print Mode

When a table spans multiple pages during printing, it's often desirable to have the header rows (TH elements) repeated on each page for easy reference. CSS provides a mechanism to achieve this.

Solution: Using the THEAD Element

The THEAD element in CSS is designed specifically for this purpose. It allows you to define a set of header rows that should be repeated on every printed page. Here's how to use it:

1. Wrap the table headers in a THEAD element:

   <table>
   <thead>
      <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
   </thead>
   <tbody>
      <!-- Table data goes here -->
   </tbody>
   </table>

   Copy after login

2. Add the following style to your @page rule:

   @page {
     margin: 1cm;
     @top-left {
       content: element(thead);
     }
   }

   Copy after login

Explanation:

• The thead element serves as a container for the header rows.
• The @page rule sets the page margins and includes a @top-left subrule with content property set to element(thead).
• This configuration instructs the browser to render the contents of the THEAD element at the top-left corner of every printed page, effectively repeating the table headers.

By utilizing the THEAD element, you can ensure that your table headers are consistently displayed on each printed page, providing a clear and convenient reference for your readers.

The above is the detailed content of How Can I Repeat Table Headers on Each Page When Printing?. For more information, please follow other related articles on the PHP Chinese website!