混水摸魚

[ CSS ] – table thead 固定

<table>
<thead style="display:block;">
<tr>
<th style="width:100px;">標題一</th>
<th style="width:100px;">標題二</th>
<th style="width:100px;">標題三</th>
<th style="width:100px;">標題四</th>
</tr>
<thead>
<tbody style="height:400px;overflow:auto;display:block">
<tr>
<td style="width:100px;">內容一</td>
<td style="width:100px;">內容二</td>
<td style="width:100px;">內容三</td>
<td style="width:100px;">內容四</td>
</tr>
</tbody>
</table>

註1:th td 的寬度要設成一樣的 不然會跑版
註2:thead tbody 兩個都要加上 display:block;

 

標題一 標題二 標題三 標題四
內容一 內容二 內容三 內容四
內容一 內容二 內容三 內容四
內容一 內容二 內容三 內容四
內容一 內容二 內容三 內容四
內容一 內容二 內容三 內容四
內容一 內容二 內容三 內容四
內容一 內容二 內容三 內容四
內容一 內容二 內容三 內容四
內容一 內容二 內容三 內容四
內容一 內容二 內容三 內容四
內容一 內容二 內容三 內容四
內容一 內容二 內容三 內容四
內容一 內容二 內容三 內容四
內容一 內容二 內容三 內容四

5 thoughts on “[ CSS ] – table thead 固定

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *