欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

table固定頭部css

江奕云2年前8瀏覽0評論

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代碼結合起來,在頁面中顯示一個固定頭部的表格就可以了。