在 CSS 的表格中,有時候我們想要固定某個單元格,讓它不隨著表格的滾動而移動。這種情況可以通過 CSS 的 position 屬性來實現。
首先,在需要固定的單元格中加入一個div
標簽,并將其樣式設置為:
div.fixed-cell { position: fixed; top: 0; left: 0; }
這樣就可以讓這個div
元素相對于瀏覽器的窗口位置固定不變。但此時,它會覆蓋在頁面中其他元素的上方,導致展示不完整。
為了解決這個問題,我們可以設定其他單元格的z-index
值比這個單元格更高,讓其處于其他元素的下方。代碼如下:
table td { position: relative; z-index: 1; } div.fixed-cell { position: fixed; top: 0; left: 0; z-index: 2; }
這樣,固定單元格就能夠完美的展示出來,而其他單元格也不會被遮擋。需要注意的是,在表格本身有相應樣式的情況下,上述 CSS 代碼可能會被覆蓋,需要進行優先級調整或者加 !important 標簽。