在Web開(kāi)發(fā)中，表格是非常常用的元素之一，而CSS表格中表頭固定，內(nèi)容滾動(dòng)則是表格的一個(gè)非常實(shí)用的特性。該特性可以使表格頭部在瀏覽器中始終可見(jiàn)，并且在表格內(nèi)容較多時(shí)，不會(huì)滾出頁(yè)面視圖范圍之外。

CSS中可以通過(guò)一些技巧來(lái)實(shí)現(xiàn)表頭固定，其他部分滾動(dòng)的效果。下面就是實(shí)現(xiàn)該效果的比較典型的代碼實(shí)現(xiàn)。

table{
width: 100%;
table-layout:fixed;
border-collapse: collapse;
}
thead{
background-color: #333;
color: #ffffff;
position: -webkit-sticky;
position: sticky;
top: 0;
}
tbody{
display: block;
overflow-y: scroll;
height: 350px;
}
th, td{
padding: 10px;
}
th{
text-align: left;
}

上述代碼實(shí)現(xiàn)了表頭固定效果。具體實(shí)現(xiàn)步驟如下：

?
• table-layout:fixed;: 使用此方法可以固定表格布局，避免了表格內(nèi)容過(guò)長(zhǎng)導(dǎo)致表格寬度發(fā)生變化的問(wèn)題。
?
• border-collapse:collapse;: 常見(jiàn)的表格邊框?qū)傩浴?/li>?
• thead: 表示表頭元素。顏色、背景、大小等可以自行設(shè)置
?
• position: -webkit-sticky;position: sticky;: 開(kāi)啟定位，將表頭固定在頁(yè)面頂部。
?
• top: 0;: 固定表頭位置為頁(yè)面頂部
?
• tbody: 表示表格內(nèi)容元素。因?yàn)橹付ǜ叨龋栽O(shè)置布局為塊狀，overflow-y設(shè)置為scroll，可以使內(nèi)容可滾動(dòng)。
?
• th, td{padding:10px;}: 表格內(nèi)容的內(nèi)邊距
?
• th{text-align:left;}: 表頭文字居左對(duì)齊

這些CSS的設(shè)置使得表頭固定，最后一行則跟隨瀏覽器滾動(dòng)。

這樣的設(shè)置基本上可以滿足表格中表頭固定其他滾動(dòng)的效果，但是因?yàn)椴煌瑸g覽器廠商實(shí)現(xiàn)方法的不同，可能會(huì)導(dǎo)致在某些瀏覽器中效果不盡如人意。

總的來(lái)說(shuō)，該方法適用于大多數(shù)情況下的表格固定表頭需求。