html表头跟随滚动,table的表头固定--上下滚动表头固定，左右滚动跟随滚动

遇到这种固定表格的，我们一般都是写两个table，一个放thead，一个放tbody；

如果表格内容少，我们只需要给两个table100%宽度就行，如果遇到表格内容很长的就比较棘手了；

1.上面的table的父容器div样式：

#fixedDiv {

position: absolute;

left: 0;

right: 0;

overflow: hidden;//这里hidden是用于隐藏滚动条

}

2.下面的table的父容器的高度要等于整个大父容器的高度 - 上面table的父容器的高度；可以js控，我这里是写死的；

3.下面的table需要给margin-top值来空出位置给上面；

4.由于右边的滚动条的原因，可能由于数据的多少改变页面布局，可以这样：

if ($('#mainDiv')[0].scrollHeight > $('#mainDiv')[0].clientHeight) {//检测是否该容器存在滚动条

$('#fixedDiv').css('right','17px');

} else {

$('#fixedDiv').css('right', '0');

}

5.

$('#mainDiv').on('scroll', function () {//下边的div滚动多少距离，上面的就滚动多少

$("#fixedDiv").scrollLeft($('#mainDiv').scrollLeft());

});

1.容器1的滚动条同时滚两个table，容器三滚下面的table

2.容器2和容器3都给足宽度，具体看代码