html表头固定

场景：

不分页的页面表单，有一定数据量。

思路：

1、要固定的内容写入一个div(headerDiv)中，使用fixed定位。

2、表单表头单独做一个table(headerTb)，放入div(headerDiv)中。

3、写一个空的div(spaceDiv),并在页面加载时将高度和固定的div(headerDiv)设为一致。

4、在之后写自己要展现的表单table(contentTb)，不用写表头。

5、将俩个table的列及其宽度设为一致(建议使用%，table固定宽度，各列的%和不要超过100%)。

相应的css和js

#spaceDiv{
z-index: 1; 
width:1700px;
opacity: 0;
background-color:#fff;
}
#headerDiv{
position: fixed;
width:1700px;
background-color: #fff;
z-index: 2;
}

 $("#spaceDiv").css("height",$("#headerDiv").height());
　　　　$(window).scroll(function(){
　　　　　//横滚表头随着滚动
        $("#headerDiv").css({
            "left":$(window).scrollLeft()/-1
        });
　　　　 //表头之上若还有操作菜单
        $("#navDiv").css({
            "position":"relative",
            "left":$(window).scrollLeft()
        });
      });

 

还有使用js每次滚动时候固定位置的方式，不过ie下效果太差。 

ie8之前不支持fixed属性，解决此问题 要注意页面doctype要使用html声明