如何僅使用 CSS 建立具有固定標題和固定第一列的表格？

使用純CSS 的具有固定標題和固定列的表格

在沒有JavaScript 的情況下建立具有固定標題和固定第一列的表格會帶來挑戰行動瀏覽器。本文探討了一種基於純 CSS 的解決方案，可以有效地實現此功能。

使用CSS Sticky 定位的解決方案：

現代網路瀏覽器支援position: Sticky 屬性，該屬性允許元素水平（左/右）或垂直（上/下）黏附到其包含塊的特定邊緣。利用這個屬性，我們可以實作固定的表頭和固定的第一列。

實現步驟：

1. 建立容器： 將表格放置在將處理滾動的容器元素內。
2. 啟用在容器上捲動：指定溢位：在容器上捲動以啟用水平/垂直捲動。
3. 黏住標題和第一列儲存格：對表格標題使用黏性定位（第）黏在頂部，第一列儲存格（tbody th）黏在left.
4. 修正左列上的標題：為了確保第一列中的標題儲存格保持固定，請在thead th:first-child上設定 left: 0 和 z-index: 2。 Z-index 用於確保標題單元格保持在 tbody 樣式中模擬邊框的頂部。
5. 模擬第一列的邊框： 瀏覽器傾向於刪除黏性元素上的邊框。為了解決這個問題，我們在 tbody 上使用 box-shadow 來模擬 border-right。

CSS 代碼：

/* Enable scrolling on container */
div.container {
  max-width: 400px;
  max-height: 150px;
  overflow: scroll;
}

/* Stick header cells to top */
thead th {
  position: sticky;
  top: 0;
}

/* Stick first column cells to left */
tbody th {
  position: sticky;
  left: 0;
}

/* Stick first column header cell on the left */
thead th:first-child {
  left: 0;
  z-index: 2;
}

/* Emulate border for first column */
tbody th {
  border-right: 1px solid #CCC;
  box-shadow: 1px 0 0 0 #ccc;
}

結論:

透過結合滾動容器和黏性定位，我們可以建立一個固定的表頭和固定第一列，無需依賴JavaScript。該解決方案受到現代瀏覽器的廣泛支持，並在桌面和行動裝置上提供流暢的滾動體驗。

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