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

原创 2006年06月06日 12:44:00

 

这几天修改列表的样式风格,提到了列表表头的固定方法,总结一下常见的几种:
第一种感觉最简单的就是分放在两个<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。否则就会出现不对应的现象。

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

这几天修改列表的样式风格,提到了列表表头的固定方法,总结一下常见的几种:第一种感觉最简单的就是分放在两个标签里,这样只控制不含有标题的那个,代码如下:      标题一    标题二    标题三 ...
  • TrampEagle
  • TrampEagle
  • 2006年04月13日 14:11
  • 687

CSS固定表格表头

固定表格表头 div{ overflow-y: scroll; overflow-x: hidden; height: 100px; margin-top: 5px...
  • longvs
  • longvs
  • 2013年10月30日 17:22
  • 4069

Table实现表头固定

实现思路:1、  定义一层div,设置div的高度和宽度。2、  定义一个table,用来显示表头。显示指出tbody,通过col属性设置列宽(用于与下文tabel对应列数据)。3、  定义一个div...
  • ac903919
  • ac903919
  • 2010年09月08日 10:06
  • 7806

javascript多表表头固定-1

上班的第一个工作竟然是做表头固定,弄了很久都没有弄出来,最后在各位大神的帮助下,有了最后的这个成果。(PS:经过IE11,FF,Chrome测试通过) tableHeaderFlow.js文件: /*...
  • yuechang5
  • yuechang5
  • 2014年01月13日 13:00
  • 755

基于jquery的固定表头和列头的方法

/** * 锁定表头和固定列 * 支持IE6+,FF3.6+,Opera9+,Chrome9+ * @param TableID 要锁定的Table的ID * @param FixColumn...
  • u011974797
  • u011974797
  • 2016年05月26日 11:50
  • 1634

js、css实现table表头固定

原生table表头随表体一起上下滚动 在html中利用js、css将表头固定,可将原table拆分,分为表头table,表体table。 大致框架如: ...
  • Eric19911992
  • Eric19911992
  • 2017年03月09日 09:45
  • 558

简单实现Table固定表头

下面是本人写的很简单的固定TABLE头部的插件,他使用动画来帮你固定表头,从而在保持表头格式的同时,不会损耗太多性能...
  • github_35143739
  • github_35143739
  • 2017年12月18日 10:34
  • 404

bootstrap Table表头固定

简介 bootstrap Table的使用方法不多介绍,可参考官方说明文档,地址:http://bootstrap-table.wenzhixin.net.cn/documentation/ 表...
  • youshouyiqi
  • youshouyiqi
  • 2017年02月25日 11:47
  • 9754

js表头固定实现思路汇总

关于表头固定,表内容滚动的实现,本人总结了3中实现思路,具体如下: 思路一   当发生滚动事件后,动态复制一份表头,将其放置在原表头的位置,为滚动的容器添加scroll事件,时刻保持复制表头的t...
  • chrisjingu
  • chrisjingu
  • 2015年09月11日 17:39
  • 971

bootstrap的table表头固定tbody滚动

栏目一 栏目二 栏目三 栏目一 栏目二 栏目三 星期一 星期二 星期三 星...
  • bbsyi
  • bbsyi
  • 2016年04月11日 21:47
  • 21641
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:常用的固定表头的几种做法
举报原因:
原因补充:

(最多只允许输入30个字)