欧美激情亚洲,亚洲欧美区自拍先锋,怡红院av一区二区三区

常用的固定表頭的幾種做法

這幾天修改列表的樣式風(fēng)格，提到了列表表頭的固定方法，總結(jié)一下常見(jiàn)的幾種：
第一種感覺(jué)最簡(jiǎn)單的就是分放在兩個(gè)<table/>標(biāo)簽里，這樣只控制不含有標(biāo)題的那個(gè)<table/>，代碼如下:

<table width="300"? border="0" cellpadding="0" cellspacing="1" bgcolor="#0099CC">
? <tr>
??? <th width="25%" nowrap><font color="#FFFFFF">標(biāo)題一</font></th>
??? <th width="25%" nowrap><font color="#FFFFFF">標(biāo)題二</font></th>
??? <th width="25%" nowrap><font color="#FFFFFF">標(biāo)題三</font></th>
??? <th width="25%" nowrap><font color="#FFFFFF">標(biāo)題四</font></th>
? </tr>
</table>
<span style="overflow-y:auto;height:100px;width:320px">
<table width="300"? border="0" cellpadding="0" cellspacing="1" bgcolor="#0099CC">
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
</table>
</span></td>
</tr>
<tr>
</table>

第二種不是很靈活，但是也比較簡(jiǎn)單，就是通過(guò)一個(gè)層來(lái)進(jìn)行處理，將<table/>放入層中，代碼如下：

<html>
<head>
?? <title>Some Title</title>
?? <style>
??? <!--
? table {
??? border-collapse : collapse;
??? table-layout??? : fixed;
? }

? td, th {
??? background-color: #aaaaaa;
??? border-right??? : 1px solid #ffffff;
??? color?????????? : #ffffff;
??? width?????????? : 100px;
??? text-align????? : center;
? }

? th.locked_top {
??? background-color: #343421;
??? font-weight???? : bold;
??? top???????????? : expression(document.getElementById('table_container').scrollTop);
??? border-top????? : 1px solid #ffffff;
??? position??????? : relative;
??? z-index???????? : 1
? }

? #table_container {
???? width????????? : 300px;
???? height???? : 100px;
???? overflow?????? : scroll;
????
? }
??? -->
?? </style>
?? </head>

<body>

?? <div id='table_container'>

<table width="300"? border="0" cellpadding="0" cellspacing="1" bgcolor="#0099CC">
? <tr>
??? <th width="25%"? class='locked_top'><font color="#FFFFFF">標(biāo)題一</font></th>
??? <th width="25%"? class='locked_top'><font color="#FFFFFF">標(biāo)題二</font></th>
??? <th width="25%"? class='locked_top'><font color="#FFFFFF">標(biāo)題三</font></th>
??? <th width="25%"? class='locked_top'><font color="#FFFFFF">標(biāo)題四</font></th>
? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
</table>
?? </div>?

</body>
</html>

從以上代碼可以看出，第二種不太方便的地方就是有一個(gè)id限制，給我的感覺(jué)就不是很舒服，但的確是非常的簡(jiǎn)單易用。

第三種也不是很麻煩，不使用id，但是這個(gè)代價(jià)卻是通過(guò)增加一個(gè)層（<div/>）的代價(jià)換來(lái)的，這時(shí)其中層的寬度設(shè)置就成為了關(guān)鍵?？梢钥匆幌略创a，如下：

<html>
<head>
?? <title>Some Title</title>
?? <style>
DIV.tableContainer {
?OVERFLOW-X: auto; WIDTH: 100px
}
DIV.bodyContainer {
?OVERFLOW-Y: auto; OVERFLOW-X: hidden; WIDTH: 300px; HEIGHT: 100px;
}
?? </style>
?? </head>

<body>

?? <DIV class=tableContainer>
<table>
?<tr>
??<td>
<table width="300"? border="0" cellpadding="0" cellspacing="1" bgcolor="#0099CC">
? <tr>
??? <th width="25%" nowrap><font color="#FFFFFF">標(biāo)題一</font></th>
??? <th width="25%" nowrap><font color="#FFFFFF">標(biāo)題二</font></th>
??? <th width="25%" nowrap><font color="#FFFFFF">標(biāo)題三</font></th>
??? <th width="25%" nowrap><font color="#FFFFFF">標(biāo)題四</font></th>
? </tr>
</table>
?
??? <DIV class=bodyContainer>
???? ?<table width="300">
???? <tbody>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
? <tr bgcolor="#FFFFFF">
??? <td width="25%"> 1</td>
???????????????
??? <td width="25%"> 2</td>
???????????????
??? <td width="25%"> 3</td>
???????????????
??? <td width="25%"> 4</td>
??????? </tr>
????? </tbody>
??? </table>
? </div>
</td></tr>
?? </table>
?? </div>?

</body>
</html>

使用第三種方法時(shí)要特別注意：
最外邊的層<div/>中設(shè)置的寬度，僅僅為顯示整個(gè)列表的寬度，高度也是如此。里面的層(<div/>)中的寬度一定要和表格的寬度一致，例如此處為300。否則就會(huì)出現(xiàn)不對(duì)應(yīng)的現(xiàn)象。

posted on 2006-04-13 10:36 TrampEagle 閱讀(875) 評(píng)論(3) 編輯收藏所屬分類: 學(xué)習(xí)體會(huì)

Feedback

# re: 常用的固定表頭的幾種做法 2006-04-13 12:01 lizongbo

怎么不用thead和tbody？？？

回復(fù) 更多評(píng)論

# re: 常用的固定表頭的幾種做法 2006-04-13 12:44 TrampEagle

@lizongbo
我想這是習(xí)慣問(wèn)題吧，呵呵！
這個(gè)只是一個(gè)示例，至于具體的標(biāo)簽，還是根據(jù)自己的愛(ài)好與習(xí)慣吧，不過(guò)都可以通過(guò)這些方法來(lái)實(shí)現(xiàn)的。如果你有更好的方法，還望不吝賜教！回復(fù) 更多評(píng)論

# re: 常用的固定表頭的幾種做法 2006-04-13 13:10 dudu

這樣的文章不合適發(fā)表在首頁(yè)! 回復(fù) 更多評(píng)論

新用戶注冊(cè) 刷新評(píng)論列表


只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問(wèn) 管理
相關(guān)文章: Linux上安裝MQ7.5 ORACLE查詢表方法本地化（國(guó)際化）rich:calendar控件使用Richface通過(guò)js腳本直接局部刷新 jboss seam 常用控件如何使用java動(dòng)態(tài)創(chuàng)建ODBC數(shù)據(jù)源如何通過(guò)URLConnection向HttpServlet發(fā)送信息在dos下添加臨時(shí)路由批處理添加和刪除文件使用BigDecimal時(shí)提高系統(tǒng)性能的一些優(yōu)化

鷹翔宇空

公告

常用鏈接

留言簿(16)

隨筆分類(107)

隨筆檔案(109)

文章分類(145)

文章檔案(141)

收藏夾(22)

java

javascript

jdbc

web

其它

開(kāi)源項(xiàng)目

我的好友

最新隨筆

搜索

最新評(píng)論

閱讀排行榜

評(píng)論排行榜

Feedback