How Can I Repeat Table Headers on Multiple Pages When Printing?

Repeating Table Headers in Print Mode

The THEAD element is specifically designed to address the issue of repeating table headers on multiple pages in print mode. By using the THEAD element, you can define the header rows of a table that should be repeated on each page if the table spans several pages.

HTML Markup:

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <!-- Table data -->
  </tbody>
</table>

CSS:

@page {
  margin: 1cm;
}

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

Explanation:

The @page rule sets the print margins for the document.

The thead element wraps the header rows of the table. By applying display: table-header-group to the thead element, the browser is instructed to treat the header rows as a group and repeat them on each page if necessary.

This ensures that the table headers remain visible throughout the printed output, even if the table extends beyond a single page.

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