Comment créer des en-têtes de tableau fixes avec CSS ?

Fixing Table Headers with CSS

Creating a table with fixed headers can enhance readability and navigation, especially when dealing with large datasets. Let's explore how to achieve this using CSS:

Define Table Structure

The table should include both a header and a body, represented by and elements respectively. Each row should be within a element, including the header row.

Separate Header and Body

To separate the content of the header from the body, use display: block for both thead and tbody. This detaches them from the default table layout.

Apply Scrolling to the Body

Set overflow: auto on tbody to enable horizontal scrolling, and apply a height to limit the scrollable area.

Set Widths and Alignment

Set static widths for both th and td to align columns. Ensure that the header and body have the same total width.

Additional CSS

For more control over column widths, use nth-child selectors with min-width and max-width properties. This allows for varying column sizes while maintaining alignment.

Example Code

Here's a code snippet that demonstrates a table with fixed headers:

table {
  width: 100%;
}

table tbody,
table thead {
  display: block;
}

table tbody {
  overflow: auto;
  height: 100px;
}

th,
td {
  width: 100px;
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!