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

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

簡介：

建立具有固定標題和固定列的表格固定的第一列可以為查看超出可見視窗的大型資料集或表格提供穩定且簡化的使用者體驗。傳統上，JavaScript 或 jQuery 已用於此目的。但是，這可能會在行動瀏覽器上遇到效能問題。本文探討了一種純 CSS 解決方案來實現此功能，同時保持平滑滾動。

使用 CSS 黏性定位：

CSS 位置：黏性屬性允許元素黏在當滾動超過某個點時，頂部、側面或兩者。套用此屬性可以實現固定標題和固定列的效果。

步驟：

1. 將表格包裹在容器中： 建立一個 div 容器來容納表格。
2. 在容器： 應用溢位：捲動；到容器元素。
3. 將標題貼到頂部： 使用position: Sticky 和 ​​top: 0 定位標題行（thead tr）;。
4. 將第一列黏在一邊： 定位第一列儲存格（tbody td:first-child 或 tbody th:first-child) usingposition:sticky and left:0;.
5. 應用樣式來改善外觀：透過為表格、標題和列元素添加樣式來增強視覺吸引力.

額外注意事項：

• 容器尺寸：確保容器具有適當的 max-width 和 max-height 屬性以限制滾動。
• z -index: 使用z-index來控制sticky的重疊順序
• 瀏覽器支援： Chrome、Firefox 和Edge支援position: Sticky 屬性。

示例代碼：

結論：

利用CSS 粘性定位，可以實現表格中固定表頭和固定第一列的效果無需借助JavaScript。該解決方案提供了純粹基於 CSS 的方法，可確保平滑的滾動性能，尤其是在行動瀏覽器上。

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