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

Repeating Table Headers in CSS Print Mode

Question:

Can CSS be used to ensure that table headers (th) are repeated on every printed page when a table spans multiple pages?

Answer:

Yes, this is possible using the THEAD element.

Explanation:

The THEAD element is specifically designed for this purpose. When used with the @page property, it allows you to repeat the table headers on every page of a printed document, even if the table extends beyond a single page.

CSS Code:

To repeat table headers using the THEAD element, follow these steps:

1. Create a separate THEAD element to contain your table headers (th).
2. Wrap the THEAD element around the opening and closing rows of your table header.
3. In your CSS, add the following code inside the @page property:

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

This code will tell the browser to automatically repeat the THEAD element on every page when the table is printed.

Reference:

For more information on the THEAD element and its use in print mode, refer to the following official documentation:

[CSS THEAD Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead)

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