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

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

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

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

实现两步骤：

1 画前端页面

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

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

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

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

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

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

简化后的代码如下：

<div style="width:1000px;height:600px;">
<div style="float:left;">
<div style="float:left;"><table>...</table></div>
<div id="t_r_t" style="float:left;overflow-x:hidden;"><table>...</table></div>
</div>
<div style="float:left;">
<div id="cl_freeze" style="float:left;overflow-y:hidden;"><table>...</table></div>
<div id="t_r_content" style="float:left;overflow:auto;width:700px;height:400px;" onscroll="aa()"><table>...</table></div>
</div>
</div>
<script>
aa:function(){
var a=document.getElementById("t_r_content").scrollTop;
var b=document.getElementById("t_r_content").scrollLeft;
document.getElementById("cl_freeze").scrollTop=a;
document.getElementById("t_r_t").scrollLeft=b;
}
</script>

2 填充数据

这4个div层填充数据时，需要切记切记！

后台数据最好设置为List类型的数据，左右数据列要对齐，上标题列与下面数据也要对齐。

如果仍有问题，欢迎留言！O(∩_∩)O谢谢