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

建立具有固定標題的可捲動表格主體

使用大型表格時，通常需要固定標題，同時允許主體可捲動。這樣，用戶可以輕鬆瀏覽數據，而不會忘記列標題。

使用 CSS 位置：黏性

適用於 Chrome、Firefox 等現代瀏覽器Edge，一個簡單的 CSS 解決方案就可以提供所需的行為。按應用位置：黏性；頂部：0；對於第 th 個元素，您可以將 header 固定在表格頂部，同時允許 tbody 獨立滾動。

.tableFixHead {
  overflow: auto;
  height: 100px;
}

.tableFixHead thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

附加 CSS

至增強表格的外觀和功能，視需要包含其他 CSS。例如：

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px 16px;
}

th {
  background: #eee;
}

HTML 結構

在類別為「tableFixHead」的 div 中，新增包含 thead 和 tbody 元素的表格。

<div></div>

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