實現一個可以鎖定上標題欄和左標題欄的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謝謝