Table固定表头固定左侧列

效果图：

思路：把需要固定的内容进行拆封，比如左侧的表头和内容，右侧的表头和内容，都单独的存放在一个table中，在滚动条滚动的时候通过jquery scroll()区分横向纵向滚动条的方法来实现左侧内容的滚动和右侧表头的滚动。

第一步：

 <div class="jxc-right">
      <div id="left_div" style="float:left;">
            <div class="lui-table-header1">
                 <table class="fd_table">
                     <thead class="fd_head1">
                     </thead>
                  </table>
             </div>
             <div class="lui-table-body1" style="overflow:hidden;">
                  <table class="fd_table">
                      <tbody class="fd_body1"></tbody>
                  </table>
             </div>
      </div>
      <div id="right_div" style="float:left">
             <div class="lui-table-header" style="overflow:hidden;">
                   <table class="fd_table" style="border-right: 17px solid #f0f0f0;">
                       <thead class="fd_head">
                       </thead>
                   </table>
             </div>
             <div class="lui-table-body" style="overflow-y:auto;overflow-x:auto;">
                   <table class="fd_table">
                       <tbody class="fd_body"></tbody>
                   </table>
             </div>
      </div>
</div>

设置高度

因为右侧的高度还有滚动条的高度，所以左侧的高度要比右侧的小点。

    $(".lui-table-body").height(document.documentElement.clientHeight - 215);
    $(".lui-table-body1").height(document.documentElement.clientHeight - 232);

  $('.lui-table-body').each(function () { $(this).data('slt', { sl: this.scrollLeft, st: this.scrollTop }); }).scroll(function () {
                 var sl = this.scrollLeft, st = this.scrollTop, d = $(this).data('slt');
                 if (sl != d.sl) {
                      $(".lui-table-header").scrollLeft(sl);
                 }
                 if (st != d.st) {
                      $(".lui-table-body1").scrollTop(st);
                 }
                 $(this).data('slt', { sl: sl, st: st });
  })

each一次设置选择器选中对象的scrollLeft/scrollTop就行了，然后绑定scroll事件，触发的时候获取scrollLeft/scrollTop和初始化的scrollLeft/scrollTop对比判断是横向还是纵向，同时更新对象存储的scrollLeft/scrollTop