在網頁中，表格是非常常見的元素之一。然而，當表格的行數比較多的時候，頁面滾動起來會非常不方便。因此，有些時候我們需要將表格的表頭固定在頁面的頂部，這樣就可以在查看表格時隨意滾動，而表頭還會一直固定在屏幕的頂部。 要實現表格表頭固定的效果，我們需要使用 CSS 來控制表格的樣式，并且使用 JavaScript 來操縱表格的 DOM 結構。 首先，我們可以使用 CSS 中的 position 屬性來實現表頭固定。將表格頭部的 CSS 樣式設為 position: fixed，然后再設置一些相應的樣式，就可以達到固定表頭的效果了。 下面是一個示例 CSS 樣式：

table thead tr{
position: fixed;
width: 100%;
top: 0;
left: 0;
background-color: #fff;
z-index: 1;
}

在這個 CSS 樣式中，我們將表格的頭部（thead）的樣式設置為了 position: fixed，然后將它固定在了頁面的頂部（top: 0;），同時設置了白色的背景顏色，以及一個較高的 z-index 值，這樣就可以保證表頭一直處于最頂層。 然后，為了使表格正常顯示，我們還需要為表格的身體（tbody）設置一個與表頭一樣的高度。這個可以通過 JavaScript 來實現：

let tbody = document.querySelector('table tbody');
let trs = document.querySelectorAll('table tbody tr');
let height = 0;
trs.forEach(tr =>{
height += tr.clientHeight;
});
tbody.style.height = height + 'px';

在這個 JavaScript 中，我們取得了表格身體（tbody）以及每行的高度（clientHeight），并累加得出了整個表格身體的高度。最后，將表格身體的高度設置為所得值，這樣我們就可以確保表格正常顯示了。 最終，通過以上的 CSS 和 JavaScript 設定，我們就可以實現一個固定表頭的表格了。這種表格在頁面滾動的時候，表頭會一直保持在頁面頂部的位置，方便在長表格中查看數據。 使用CSS固定表格的表頭，可以讓表格更加易讀，方便用戶查看數據。同時，這也是一個比較常見的前端開發技巧，希望大家可以學好這個技能，寫出更好的頁面。