Bagaimana untuk Mencipta Pengepala Jadual Tetap dengan 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;
}

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Pengepala Jadual Tetap dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!