How Can I Repeat Table Headers on Each Printed Page Using CSS?-CSS Tutorial-php.cn

How Can I Repeat Table Headers on Each Printed Page Using CSS?

Repeat Table Headers in Print Mode with CSS

It is possible to ensure that table headers () are repeated on every page if a table spans multiple pages using CSS. This can be achieved by utilizing the THEAD element.

The THEAD element represents the header of a table and is typically defined within the

element. By using the THEAD element, you can group the table header rows and specify that they should be repeated on every page of the printed document.

Example

@page {
  thead { display: table-header-group; }
}

Copy after login

This CSS rule sets the display property of the thead element to table-header-group. When the thead is set to table-header-group, the browser ensures that the table header rows are repeated on each page of the printed document.

Reference

Refer to the official documentation for more information on the THEAD element: [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead](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 Printed Page Using CSS?. For more information, please follow other related articles on the PHP Chinese website!

source：php.cn

Previous article：How to Make Images Proportionally Fill Divs in CSS? Next article：How Can I Change Input Button Images Using CSS and Handle Browser Compatibility Issues?

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn