CSS 表頭不固定是一種常見(jiàn)的網(wǎng)頁(yè)設(shè)計(jì)技巧，可以讓網(wǎng)頁(yè)中的表格在用戶滾動(dòng)頁(yè)面時(shí)，表格的頂部欄可以保持在網(wǎng)頁(yè)頂部。

table {
width: 100%;
table-layout: fixed;
border-spacing: 0;
}
thead {
background-color: #f7fafc;
position: sticky;
top: 0;
}
th {
padding: 10px 15px;
font-weight: 500;
text-align: left;
vertical-align: middle;
border-bottom: 1px solid #edf2f7;
}

如上代碼中，通過(guò)設(shè)置表格的table-layout: fixed;屬性，使表頭的寬度與內(nèi)容相適應(yīng)，可以避免表格在出現(xiàn)橫向滾動(dòng)條時(shí)出現(xiàn)問(wèn)題。通過(guò)在表頭元素 thead 上設(shè)置position: sticky;和top:0;屬性，實(shí)現(xiàn)表頭不固定功能。同時(shí)，對(duì)表格的樣式進(jìn)行優(yōu)化，使其更具可讀性和美觀度。

在實(shí)際應(yīng)用中，需要根據(jù)具體頁(yè)面的設(shè)計(jì)需求來(lái)設(shè)置表格的樣式和屬性，以達(dá)到最佳的用戶體驗(yàn)效果。