说明：

使用easyui等都可以实现table固定首行首列的功能。
但仅仅只需要这一个功能，完全可以用css+js简单实现而不用引入更多工具。
网上找到很多的思路，自己对其中比较简单的一个进行了整理。

大致效果：

Paste_Image.png

页面布局：

Paste_Image.png

如上图：
1、整个页面分成 左右 两部分：
2、左边分为 上下 两部分
3、右边分为 上下 两部分(红色框比较特殊，多加一个div为了防止列的偏移)

具体步骤：

1、html：(省略tr、td)

<div id="left_div"><div id="left_div1"><table id="left_table1"></table></div><div id="left_div2"><table id="left_table2"></table></div>
</div>
<div id="right_div"><div id="right_div1"><div id="right_divx"><table id="right_table1"></table></div></div><div id="right_div2"><table id="right_table2"></table></div>
</div>

2、css：

(1)left_div与right_div 使用左浮动
(2)上图蓝色div框，宽度可以都使用100%，跟随左右大的div(left_div与right_div)
(3)left_div2 及 right_div1 需要加上overflow: hidden
(4)防止列错位：right_divx(上图红色div框)的宽度需要大于right_table1及right_table2，20px
(5)防止行错位：left_div2 高度 大于 right_div2 高度，20px

td{width: 100px;
}
#left_div{width:200px;float: left;
}
#left_div1{width: 100%;
}
#left_div2{width: 100%;height: 100px;overflow: hidden;
}
#right_div{width: 600px;float: left;
}
#right_div1{width: 100%;overflow: hidden;
}
#right_divx{width: 820px;
}
#right_div2{width:100%;height:120px;overflow: auto;
}
#right_table1{width: 800px;
}
#right_table2{width: 800px;
}

3、js：

思路：
1、左下div(left_div2) 随着 右下div(right_div2) 上下移动
2、右上div(right_div1) 随着 右下div(right_div2) 左右移动

var right_div2 = document.getElementById("right_div2");
right_div2.onscroll = function(){var right_div2_top = this.scrollTop;var right_div2_left = this.scrollLeft;document.getElementById("left_div2").scrollTop = right_div2_top;document.getElementById("right_div1").scrollLeft = right_div2_left;
}