日韩欧美国产精品,丁香五六月婷婷久久激情,国产成人精品999在线观看

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

這幾天修改列表的樣式風格，提到了列表表頭的固定方法，總結一下常見的幾種：
第一種感覺最簡單的就是分放在兩個<table/>標簽里，這樣只控制不含有標題的那個<table/>，代碼如下:

<table width="300"? border="0" cellpadding="0" cellspacing="1" bgcolor="#0099CC">
? <tr>
??? <th width="25%" nowrap><font color="#FFFFFF">標題一</font></th>
??? <th width="25%" nowrap><font color="#FFFFFF">標題二</font></th>
??? <th width="25%" nowrap><font color="#FFFFFF">標題三</font></th>
??? <th width="25%" nowrap><font color="#FFFFFF">標題四</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>

第二種不是很靈活，但是也比較簡單，就是通過一個層來進行處理，將<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">標題一</font></th>
??? <th width="25%"? class='locked_top'><font color="#FFFFFF">標題二</font></th>
??? <th width="25%"? class='locked_top'><font color="#FFFFFF">標題三</font></th>
??? <th width="25%"? class='locked_top'><font color="#FFFFFF">標題四</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>

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

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

<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">標題一</font></th>
??? <th width="25%" nowrap><font color="#FFFFFF">標題二</font></th>
??? <th width="25%" nowrap><font color="#FFFFFF">標題三</font></th>
??? <th width="25%" nowrap><font color="#FFFFFF">標題四</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>

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

posted on 2006-04-13 10:36 TrampEagle 閱讀(875) 評論(3) 編輯收藏所屬分類: 學習體會

Feedback

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

怎么不用thead和tbody？？？

回復更多評論

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

@lizongbo
我想這是習慣問題吧，呵呵！
這個只是一個示例，至于具體的標簽，還是根據自己的愛好與習慣吧，不過都可以通過這些方法來實現的。如果你有更好的方法，還望不吝賜教！回復更多評論

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

這樣的文章不合適發表在首頁! 回復更多評論

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




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

鷹翔宇空

公告

常用鏈接

留言簿(16)

隨筆分類(107)

隨筆檔案(109)

文章分類(145)

文章檔案(141)

收藏夾(22)

java

javascript

jdbc

web

其它

開源項目

我的好友

最新隨筆

搜索

最新評論

閱讀排行榜

評論排行榜

Feedback