效果如下图所示。
最左边的四列，以及最后一列为固定列。中间的为滚动列。
具体实现思路：
创建三个表格。
左边四列为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]);
}
}
缺点，扩展和通用性不佳，但是基本需求可以达到。