CSS表頭凍結教程 在前端開發中，經常會遇到需要固定表頭的需求，這樣可以使表格內容過長時，表頭部分固定在頁面頂部，方便用戶查看和操作。本文將介紹如何使用CSS實現表頭凍結。 第一步，定義表格結構和CSS樣式。我們先在HTML中定義一個表格結構，包括表頭和表格內容，然后寫好對應的CSS樣式，在這里為了方便，我們使用bootstrap框架提供的樣式。

<table class="table table-hover">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
<th>電話</th>
<th>地址</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>25</td>
<td>男</td>
<td>13888888888</td>
<td>北京市海淀區</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
<td>13999999999</td>
<td>上海市浦東新區</td>
</tr>
...
</tbody>
</table>
<style>
table {
border-collapse: collapse;
}
table thead tr th {
background-color: #999;
color: #fff;
}
table tbody tr td {
border: 1px solid #ccc;
padding: 5px 10px;
}
</style>

第二步，使用CSS設置表頭固定。我們可以通過設置表格和表頭的樣式，實現表頭固定的效果。首先為表格設置固定高度和overflow:hidden屬性，然后為表頭設置position:sticky屬性和top:0，這樣表頭就會固定在頁面頂部。

<table class="table table-hover">
<thead id="theader">
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
<th>電話</th>
<th>地址</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>25</td>
<td>男</td>
<td>13888888888</td>
<td>北京市海淀區</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
<td>13999999999</td>
<td>上海市浦東新區</td>
</tr>
...
</tbody>
</table>
<style>
table {
border-collapse: collapse;
height: 300px;
overflow: hidden;
}
table thead tr th {
background-color: #999;
color: #fff;
position: sticky;
top: 0;
}
table tbody tr td {
border: 1px solid #ccc;
padding: 5px 10px;
}
</style>

現在，我們就成功地實現了表頭凍結的效果。以上是CSS表頭凍結教程的全部內容，希望對你有所幫助。