常用的固定表头的几种做法

这几天修改列表的样式风格，提到了列表表头的固定方法，总结一下常见的几种：
第一种感觉最简单的就是分放在两个<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>

</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>

</body>
</html>

使用第三种方法时要特别注意：
最外边的层<div/>中设置的宽度，仅仅为显示整个列表的宽度，高度也是如此。里面的层(<div/>)中的宽度一定要和表格的宽度一致，例如此处为300。否则就会出现不对应的现象。

posted on 2006-04-13 10:36 TrampEagle 阅读(871) 评论(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