如何使用 CSS 和 JavaScript 實現帶有水平和垂直滾動條的固定標題表？

帶有水平滾動條和垂直滾動條的固定標題表

此問題解決了HTML/CSS 表格中的粘性標題和滾動條問題容器大小達到一定程度。

現有解決方案

這個問題很常見，已經提出了多種解決方案，包括：

• 截斷或隱藏溢位：這樣可以實作使用CSS 屬性，如溢位：隱藏或文字溢位：省略號。但是，它可能在視覺上不吸引人或無法保留完整資料。
• 使用 JavaScript 函式庫： 多個 JavaScript 函式庫（例如 DataTables 和 ScrollTable）提供了在表格中建立固定標題和捲軸的解決方案。然而，這些解決方案可能需要額外的程式碼或依賴項。

純CSS 解決方案

雖然純CSS 無法完全實現所有場景下的固定標題和滾動條，它可以提供部分解決方案：

/* Give the table a container with fixed height and scrolling */
#container {
  height: 400px;
  overflow-y: scroll;
}

/* Make the table header fixed */
#header {
  position: sticky;
  top: -1px;
}

CSS3解決方案（不支持IE8)

為了更好的控制和改進的支持，可以使用CSS3 屬性：

/* Give the table a container with fixed height and scrolling */
#container {
  height: 400px;
  overflow-y: scroll;
}

/* Make the table header fixed and set its width */
#header {
  position: sticky;
  top: 0;
  width: 100%;
}

注意：這些解決方案方案假設表頭和內文有固定的寬度。如果寬度不固定，可能需要額外的 CSS 規則或計算。

以上是如何使用 CSS 和 JavaScript 實現帶有水平和垂直滾動條的固定標題表？的詳細內容。更多資訊請關注PHP中文網其他相關文章！