实现固定表头表格的总结

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

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

 

方法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模拟滚动条的功能
界面效果：