Fixed Table Header 讓你的資料表格標題固定下來

算是 ASP.NET 相關問題中最古老的問題之一了。其解法有非常多種,在這裡我介紹一下 developer.com 上所列的一個解法。
以css style 的設定來控制這也是最簡單的方法 :

1. 建立下列style式樣表設於網頁<head></head>標記之中
<style type="text/css">
.fixedHeader
{
overflow: auto;
height: 150px;
width: 50%;
}
table th
{
border-width: 4px;
border-color: black;
background-color: black;
color: white;
position: relative;
top: expression(this.parentNode.parentNode.parentNode.scrollTop-1);
}
</style>

2. 建立DIV標記
<div class="fixedHeader"></div>

3. 將你的資料表格於至於 step 2 標記之中
<tableclass="tablesorter"cellspacing="1"width="97%"border="1">
<thead>
<tr><th>firstname</th>
<th>lastname</th>
<th>age</th>
<th>total</th>
<th>discount</th>
<th>date</th>
</tr>
</thead>
<tbody>
<tr>
<td>peter</td>
<td>parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>jul6,20068:14am</td>
</tr>
<tr>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>dec10,20025:14am</td>
</tr>
<tr>
<td>clark</td>
<td>kent</td>
<td>18</td>
<td>$15.89</td>
<td>44%</td>
<td>jan12,200311:14am</td>
</tr>
<tr>
<td>bruce</td>
<td>almighty</td>
<td>45</td>
<td>$153.19</td>
<td>44%</td>
<td>jan18,20019:12am</td>
</tr>
<tr>
<td>bruce</td>
<td>evans</td>
<td>22</td>
<td>$13.19</td>
<td>11%</td>
<td>jan18,20079:12am</td>
</tr>
<tr>
<td>peter</td>
<td>parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>jul6,20068:14am</td>
</tr>
</tbody>
</table>

4. 完成了 , 收工回家!

沒有留言: