花了两个晚上的时间,终于搞定了固定表头功能。
先上效果图(注:有背景图和灰色的行、列为固定的表头行和左边列,背景图是表格原有的样式,不是固定表头后添加的)
指定要固定的行数和列数,兼容各浏览器,固定后的表头和左边列的样式外观完全复制原来的表格样式。
可以设置固定整个表头,即Table中有设置了
,可以固定整个thead;也可以按指定的行数固定。有一种情况不可以启用左边列固定,即当表头行中的相应的列的单元格有合并单元格的情况下,不可以启用左边表固定。
如果要固定左边的列,则相应的表头不应有合并单元格,且要固定的列必须设置宽度,比如要固定左边第一列和第二列,则第一列和第二列需要设置宽度,截图中的为80像素宽度,即 style="width:80px;"
对于一些复杂的多层表头可能会有错位现象,以后有时间了再修改。
图1
图2
图3
图4
(注:要固定的左边列的表头单元格不能有合并单元格)
原生JS代码,代码并不多,153行代码。
var ofixed_table_st = window.setTimeout;
window.setTimeout = function(fRef, mDelay) {
if (t