CSS表頭水平滾動垂直固定，是網(wǎng)頁制作中比較常見的一種需求，它可以讓表格頭部固定在任何位置，同時表格內(nèi)容可以隨著用戶滾動而滾動，從而提升網(wǎng)頁的用戶體驗。

具體實現(xiàn)方式如下（詳細(xì)的代碼可以參照下面的pre標(biāo)簽）：

1、讓表格頭部固定：

table {
width: 100%;
border-collapse: collapse;
}
thead, tbody, tr, th, td {
display: block;
}
tbody {
height: 200px; 
overflow-y: auto;
overflow-x: hidden;
}
thead {
width: calc(100% - 17px);
}
th:last-child {
width: 17px; 
}

2、讓表格內(nèi)容能滾動：

tbody::-webkit-scrollbar {
width: 10px;
height: 10px;
}
tbody::-webkit-scrollbar-track {
background-color: #F5F5F5;
}
tbody::-webkit-scrollbar-thumb {
background-color: #000000;
}

3、讓表格可以水平滾動：

table {
display: flex;
overflow-x: scroll;
}

4、讓表格頭部在水平滾動時固定：

thead tr {
position: relative;
}
thead th {
position: sticky;
top: 0;
background-color: #FFF;
}

總結(jié)：

表格的水平滾動垂直固定是一種非常實用的技巧，能夠提升網(wǎng)頁的用戶體驗。其具體實現(xiàn)方式有許多種，相信通過上面的介紹大家已經(jīng)有了初步的了解，希望在實際應(yīng)用中，這種技術(shù)能夠給大家?guī)韼椭?/p>