如何使用 CSS 建立具有固定標題的可捲動表格？

使用CSS 建立具有固定標題的可捲動表格

當建立由於資料過多而需要捲動的表格時，使用表頭固定，資料行獨立滾動。本文將提供使用 CSS 實現此目的的詳細解決方案。

解決方案

要建立具有固定標題的可捲動表格，必須將標題元素與使用 的資料行和標籤。然後可以套用 CSS 樣式來控制其顯示和滾動行為。

CSS 樣式：

table tbody, table thead {
  display: block;
}

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

th {
  width: 72px;
}

td {
  width: 72px;
}

上的 display: block 屬性和將 header 和 body 元素分開，允許它們獨立運作。溢位：

上的自動和高度啟用資料行的滾動。為兩個設定靜態寬度。和 以確保對齊。

注意： 確保

標籤用於標題行和資料行。

增強對列寬的控制：

對於不同列寬的表格，使用CSS 指定最小和最大寬度：

table th:nth-child(1), td:nth-child(1) { min-width: 50px;  max-width: 50px; }
table th:nth-child(2), td:nth-child(2) { min-width: 100px; max-width: 100px; }
table th:nth-child(3), td:nth-child(3) { min-width: 150px; max-width: 150px; }
table th:nth-child(4), td:nth-child(4) { min-width: 200px; max-width: 200px; }

此技術提供了對列寬的精細控制，同時保持標題和資料之間的對齊行。

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