網頁中的表格是很重要的元素，但是在表格內容較多的時候，表頭會隨著滾動條一起滾動，造成用戶不方便查看表格內容。因此，如何固定表頭成為了很多前端開發人員需要解決的問題。

在實現表頭固定的方式中，JS實現方法是最常見的方式。但是，如果想要實現純CSS的表頭固定，也是完全可行的。

實現方式如下：

<div class="table-container">
<table class="table">
<thead>
<tr>
<th>表頭1</th>
<th>表頭2</th>
<th>表頭3</th>
</tr>
</thead>
<tbody>
<tr>
<td>內容1</td>
<td>內容2</td>
<td>內容3</td>
</tr>
...
</tbody>
</table>
</div>
.table-container {
max-height: 300px; /* 設置最大高度，生成滾動條 */
overflow-y: auto; /* y 軸方向滾動條 */
}
.table thead {
position: sticky; /* 設置頭部固定 */
top: 0;
background-color: #fff;
}
.table th {
height: 50px; /* 設置表頭高度 */
}

以上代碼實現了一個基本的表頭固定。其中，.table-container設置了最大高度和y軸方向滾動條，.table thead設置了頭部固定和背景顏色，.table th設置了表頭高度。

需要注意的是，該方法在IE瀏覽器中不支持。此外，如果表格的列寬不一，固定的表頭有可能不完全對齊。這種情況下，可以通過設置每個表頭的寬度相同來解決。

總之，CSS表頭固定是一種可行的方式，可以在不依賴JS的情況下實現表格的優化。