CSS表格標題固定不動是一個常見的需求,在網頁設計中經常會出現,下面我們將介紹一種簡單實用的方法實現該效果。
table { position: relative; height: 500px; overflow: auto; } th { position: sticky; top: 0; background-color: #fff; }
首先,我們需要給表格添加一個固定高度,并將overflow屬性設置為auto,這樣可以在表格高度超過父容器時出現滾動條。接著,給所有表格標題添加position: sticky屬性,并將top值設為0,這樣表格標題就會一直固定在表格頂部,不會隨著滾動條向上滾動。
最后,為了讓表格標題在滾動時保持不變,我們需要將其背景色設置為白色,這樣可以避免表格內容滾過去后遮擋住表格標題。
以上就是實現CSS表格標題固定不動的簡單方法,希望對你們有所幫助。
上一篇css表格有兩條線
下一篇mysql大表創建觸發器