CSS怎樣將表頭固定
表格可能是網站上最常用的組件之一，但是當數據集較大時，它們可能會變得難以控制和滾動。對于這種情況，將表頭固定在頁面頂部是一個相對簡單的解決方法。以下是如何使用CSS完成這項任務的示例代碼：
HTML代碼:

<table>
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>地址</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>25</td>
<td>上海</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>北京</td>
</tr>
<tr>
<td>王五</td>
<td>28</td>
<td>廣州</td>
</tr>
</tbody>
</table>

CSS 代碼:

thead, tbody {
display: block;
}
tbody {
overflow-y: scroll;
height: 300px;
}
thead>tr {
width: 100%;
background-color: #f8f8f8;
padding-right: 17px;
}
th {
text-align: left;
}
td, th {
width: 19.45%;
padding: 5px 10px;
text-align: left;
border-bottom: 1px solid #efefef;
}

首先，在HTML代碼中，使用thead元素包含表頭（即，第一個tr標簽），再加上一個tbody元素包含表格的其他行。這是必要的，因為后面我們需要使用CSS分別對它們進行樣式設置。其次，對于tbody元素，將其設置為具有縱向滾動（overflow-y:scroll）和固定高度（height:300px）的塊元素。對于thead元素，將其寬度設置為100％，同時設置背景顏色并使用了向右的內邊距，以防止滾動器與表頭重疊。最后，對于th和td元素，設置一些基礎樣式來確保它們的寬度和內邊距相同，并在它們之間添加底部邊框。
實施后，我們將會看到表格的tbody固定在一定高度內，并且tbody在用戶滾動頁面時滾動而不是整個表。與此同時，表頭會始終保持可見，并在有需要時水平滾動。