实现固定表头表格的总结

这阵正好比较空闲，将以前收集的实现固定表头表格的方法在这里整理了一下。

原来想将代码直接贴在文章里，不过试了下载入很慢，所以就放在附件了。

 

方法1：使用CSS实现
在table外面套个div限制显示大小，同时设置表头单元格的样式为
position: relative;
top: expression(document.getElementById("div").scrollTop);
其中express是IE自带的CSS属性，可以在CSS中调用js代码。

 

这里通过express中的js可以让单元格总是固定在div的最上部，不随垂直滚动条滚动。

类似的－也可以设置left: expression(document.getElementById("div").scrollLeft)，来冻结某一列不随水平滚动条滚动。当然若同时设置left和top样式，则这些单元格始终不会滚动。

 

附件中grid_css+table.html是一个基于CSS实现的行列固定的例子。
界面效果：

说明：
1、使用express来做表头固定，是最简单的，只需CSS即可，且可以支持多表头和列固定的情况
2、express是IE自带的CSS属性，在其他浏览器上都不支持；据网上的资料，express的执行效率可能有问题，鼠标移动时都会触发对应的js代码。使用需慎重！

 

方法2：使用js和table实现
基本思路：
1、使用js生成一个新的标题行，放在一个div中做为一个新表头。新建的表头，可以使用div内嵌span的方式来模拟；也可直接建一个新的table
2、将原table，放在另一个div中，同时删除表头
3、增加js代码，保持table在水平滚动时，新表头的div也会随着一起移动，保证表头和列的位置始终一致

整个表格被分到2个div中，一个放表头，一个放table。

 

附件中是grid_js+table.htm一个例子，实现了单行表头，修改一下也可以支持多行表头，在IE和FF上都可以使用：
界面效果：

 

方法3：使用js和div实现
其实基本思路跟方法2是一样的，只是更进一步，不在用table了，直接用div替代table来显示数据。
这样做的主要好处是，可以比较方便的把它扩展成一个Grid widget，由于不使用table了，不用再维护一套操作table DOM的代码。因为行都是用div拼成的，增加排序、列宽调整、直接编辑等功能都会方便一点。

 

附件中grid_js+div.html是我自己写的例子，使用JQUERY。

这个表格分为4个div，分别表示标题行、数据表格、水平滚动条、垂直滚动条，里面除了实现表头固定，还实现了用div模拟滚动条的功能
界面效果：

评论

8 楼 fanjun 2013-09-26  

express是IE自带的CSS属性

submaze 写道

第一个实例不支持火狐~总体还是挺好的

7 楼 gshxsyq 2013-09-01  

不错，挺好的，个人推荐table+div的形式，页面改动量不是很大，同样也能实现跨浏览器兼容

6 楼 submaze 2013-03-06  

第一个实例不支持火狐~总体还是挺好的

5 楼 fanjun 2012-08-09  

vetom921 写道

請問一下 首行固定的方式有無任何好一點的解法....卡關好久了orz 雖然有jquery可固定表頭跟首行 但還是想用簡單的css+js解決@@~找好久了 一直無法解決手行固定的問題..如有好方法希望可以學習...謝謝大大的總結心得...雖然表頭固定方式用不到 但大大寫的很詳細....3Q

首行固定与表头固定实现方式是一行的，如用js+table的模式就是单独做个div，把首行放进去，js控制只做水平滚动，不做垂直滚动

4 楼 java_MagicWang 2012-07-19  

第二种方法相对简单一些

3 楼 vetom921 2012-04-10  

請問一下 首行固定的方式有無任何好一點的解法....卡關好久了orz 雖然有jquery可固定表頭跟首行 但還是想用簡單的css+js解決@@~找好久了 一直無法解決手行固定的問題..如有好方法希望可以學習...謝謝大大的總結心得...雖然表頭固定方式用不到 但大大寫的很詳細....3Q

2 楼 zhulin902 2010-11-25  

很不错哦~~

1 楼 Ahua772 2010-10-11  

  希望能帮我解决问题