表格（table）列太多，实现固定列，滚动条滑动

效果如下图所示。

 最左边的四列，以及最后一列为固定列。中间的为滚动列。

具体实现思路：

创建三个表格。

左边四列为table1;中间多列为table2,右边四列为table3.

<div style="width:17%;float:left;clear:both;">

<table id="table1"  width="100%"></table>

</div>

<div style="width:74%;float:left;overflow-x:scroll;"> //需要横向滚动条，设置overflow-x:scroll

<table id="table2"  width="150%"></table> //滚动范围，设置宽度为150%（酌情修改）

</div>

 <div style="width:8%;float:left;">

 <table id="table3"  width="100%"></table>

 </div>

 

这样设计过后，基本实现三分格局，但是由于内容填充，可能会出现行不等高问题。此时，需要在页面加载完成后，执行如下代码：

  var arr1=[];
  var arr2=[];
  var arr3=[];
  $("#table1 tr").each(function(e){
      arr1[e]=$(this).height();
  });
  $("#table2 tr").each(function(e){
      arr2[e]=$(this).height();
  });
  $("#table3 tr").each(function(e){
      arr3[e]=$(this).height();
  });
  for(var i=0;i<arr1.length;i++){
      if(arr1[i]>=arr2[i]){
          $("#table2 tr:eq("+i+")").css("height",arr1[i]);
      }else{
          $("#table1 tr:eq("+i+")").css("height",arr2[i]);
      }
      if(arr1[i]>=arr3[i]){
          $("#table3 tr:eq("+i+")").css("height",arr1[i]);
      }else{
          $("#table1 tr:eq("+i+")").css("height",arr3[i]);
          $("#table2 tr:eq("+i+")").css("height",arr3[i]);
      }
  }

缺点，扩展和通用性不佳，但是基本需求可以达到。