如何使用 CSS 建立固定表頭？

使用CSS 固定表頭

建立具有固定標題的表可以增強可讀性和導航性，尤其是在處理大型數據集時。讓我們來探索如何使用CSS 來實現此目的：

定義表格結構

表格應包含標題和正文，由 表示和分別為元素。每行應該在 內元素，包括標題行。

分離標題和正文

要將標題內容與正文分開，請對 thead 和 tbody 使用 display: block。這會將它們與預設的表格佈局分開。

將捲動應用到正文

在 tbody 上設定 Overflow: auto 以啟用水平滾動，並應用高度來限制可滾動區域。

設定寬度和對齊

設定 th 和 td 的靜態寬度以對齊列。確保標題和正文具有相同的總寬度。

附加 CSS

要更好地控制列寬，請使用具有 min-width 和 max 的 nth-child 選擇器-寬度屬性。這允許在保持對齊的同時改變列大小。

範例程式碼

以下程式碼片段示範了固定標題的表格：

table {
  width: 100%;
}

table tbody,
table thead {
  display: block;
}

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

th,
td {
  width: 100px;
}

以上是如何使用 CSS 建立固定表頭？的詳細內容。更多資訊請關注PHP中文網其他相關文章！