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

更详细的博客转移到了我的github+hexo博客：https://zc95.github.io

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

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

方法1要点（scrollLeft）：  点击查看示例 http://jsrun.net/biiKp/show

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());
  });

方法2要点（灵魂画师，看图说话）：  点击查看示例 http://jsrun.net/2iiKp/show

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

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