CSS是一種可以讓網頁樣式更加優美的技術。今天要介紹的是如何通過CSS來固定表格的列頭。

在網頁制作中，表格是不可或缺的元素之一。但是，當表格內容過多時，滾動條出現后，列頭就跑到了外面，使得用戶在閱讀過程中無法確定每一列的含義。為了解決這個問題，我們可以使用CSS的position屬性來固定表格的列頭。

table {
// 設置表格寬度，使得固定列不會被壓縮
width: 100%;
// 設置表格布局方式，使得列寬度可以自適應
table-layout: fixed;
}
thead th {
// 固定列頭
position: sticky;
top: 0;
z-index: 1;
// 設置列頭的樣式
font-weight: bold;
background-color: #fff;
}

使用position: sticky屬性可以讓元素“粘”在窗口中，不跟隨滾動條滾動。同時，通過設置z-index屬性的值為1，可以讓列頭始終在表格頂部。

除了上述代碼，我們還需要給表格添加一個容器，以便在出現滾動條時讓表格可滾動。

table-container {
// 設置容器高度限制
height: 200px;
// 設置溢出部分可以滾動
overflow-y: scroll;
}

這樣配置后，表格的列頭就會固定在窗口頂部，不會跟著滾動條跑掉了。

總結來說，固定表格列頭的核心代碼就是position: sticky和z-index屬性，以及一個包裹表格的容器。