CSS中有一種非常實用的功能,就是能夠固定一個html表格的表頭部分,以便在用戶滾動頁面時,表格頭部始終顯示在頁面的頂部位置。這項功能在許多網站的數據表格中都會出現。下面就是使用CSS代碼實現表格固定頭部的方法。
table { width: 100%; } thead, tbody { display: block; } tbody { height: 200px; overflow-y: auto; } th { height: 30px; line-height: 30px; text-align: left; background-color: #f5f5f5; } td { height: 30px; line-height: 30px; border-bottom: 1px solid #ddd; }
上述代碼使用了display屬性和overflow-y屬性來實現固定表頭的效果。其中,thead和tbody元素的display被設置為block,將它們變為塊級元素,從而使它們可以分別垂直排列。同時,tbody的高度被設置為200px,并將其overflow-y屬性設置為auto。這樣一來,當表格內容超過200px的高度時,tbody元素就會出現滾動條。
在表格頭部,th元素的高度被設置為30px,并且將它們的背景顏色設置為灰色,用來和tbody的背景顏色區分開來。接下來,給td元素添加下邊框就可以了。
有了這些CSS代碼,實現表格固定頭部的效果就非常簡單了。只需要將表格的HTML代碼和這些CSS代碼結合起來,在頁面中顯示一個固定頭部的表格就可以了。
上一篇css透明模糊背景圖片
下一篇mysql 表名改成大寫