亚洲欧洲日本精品,久久精品7亚洲午夜a,亚洲成a人片在线观看播放

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

這幾天修改列表的樣式風(fēng)格，提到了列表表頭的固定方法，總結(jié)一下常見的幾種：
第一種感覺最簡單的就是分放在兩個(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>

第二種不是很靈活，但是也比較簡單，就是通過一個(gè)層來進(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限制，給我的感覺就不是很舒服，但的確是非常的簡單易用。

第三種也不是很麻煩，不使用id，但是這個(gè)代價(jià)卻是通過增加一個(gè)層（<div/>）的代價(jià)換來的，這時(shí)其中層的寬度設(shè)置就成為了關(guān)鍵。可以看一下源代碼，如下：

<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)不對應(yīng)的現(xiàn)象。

posted on 2006-04-13 10:36 TrampEagle 閱讀(873) 評(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í)慣問題吧，呵呵！
這個(gè)只是一個(gè)示例，至于具體的標(biāo)簽，還是根據(jù)自己的愛好與習(xí)慣吧，不過都可以通過這些方法來實(shí)現(xiàn)的。如果你有更好的方法，還望不吝賜教！回復(fù) 更多評(píng)論

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

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

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


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




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

鷹翔宇空

公告

常用鏈接

留言簿(16)

隨筆分類(107)

隨筆檔案(109)

文章分類(145)

文章檔案(141)

收藏夾(22)

java

javascript

jdbc

web

其它

開源項(xiàng)目

我的好友

最新隨筆

搜索

最新評(píng)論

閱讀排行榜

評(píng)論排行榜

Feedback