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

CSS中可以通過一些技巧來實現(xiàn)表頭固定，其他部分滾動的效果。下面就是實現(xiàn)該效果的比較典型的代碼實現(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;
}

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

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

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

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

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