实现锁定上标题栏和左标题栏的table表格---最佳实践

实现一个可以锁定上标题栏和左标题栏的table，左右上下都可以滚动！

在html界面上实现这个功能，花了一下午加一个早晨，试了很多办法，只有这一种方法最靠谱，其他实现都过于复杂，而且存在各种各样的问题，只能满足一部分需求。

本文案例应被评为最佳实践...^_^

实现两步骤：

1 画前端页面

(1)在html界面上添加一个大的div层，规定最大长宽，最外边的层最好大一点。

(2)按照锁定标题栏划分出4个div层，两个一行，两个一行。

这里面：我试出了几个经验，不一定最好：

A 特别要注意table行列宽度，因为行列宽度经常被撑大，因此尽量将table行里的东西放到小控件中，小控件设置好宽度，这样table的行列大小就固定住了，防止出现上下左右对不齐的情况出现。

B 最右下角带滚动条的div，长宽切记要额外加上滚动条的宽度！即上下滚动条的宽度要加到右下角div的width中！左右滚动条的高度要加到右下角div的height中，否则上下左右滚动条拖到最大时就会出现上下左右对不齐的情况。

(3)添加一段同步滚动的js脚本！

简化后的代码如下