之前搗鼓了一個(gè)可以鎖定橫縱表頭的HTML表格，不過那天急著回家就只給了一個(gè)demo示例。這不長假過后又挺忙活，一拖就給拖到周末了。這個(gè)東西雖然不是什么新奇的玩意，不過里面的細(xì)節(jié)還是有不少，所以有知其然并希望知其所以然的博友，歡迎來一起討論討論。

    實(shí)現(xiàn)這個(gè)鎖定表頭的效果其實(shí)到有很多的方法，不過使用單一表格來實(shí)現(xiàn)，需要借助IE的css支持的expression表達(dá)式關(guān)鍵字。另外就是對瀏覽器布局原理的理解，如果不熟悉可以參考我原來寫的兩篇文章。所以要實(shí)現(xiàn)這個(gè)效果，我們需要也只需要做兩件事情，一是使用css提供的expression功能；二是使用css提供的position修改布局方式的能力。

    首先我們來看上部表頭的鎖定，我們知道對于container元素，如果要限定內(nèi)部內(nèi)容的大小，并出現(xiàn)滾動條。因該是用如下css來定義可以作為容器的元素，這里我使用的是div來做為表格的容器，代碼如下：
// 重要的就是那個(gè)overflow:auto。順便說一下，弄出滾動條這個(gè)css設(shè)置雖然非常的easy，不過不知道IE這么搞的，這個(gè)容器只能在height上設(shè)置百分比，而width的大小必須是固定的值，否這width方向上就不能出現(xiàn)滾動條

    其實(shí)如果就這樣我們把table放入div中，就已經(jīng)是一個(gè)可以滾動的表格了，只是所有的單元格也都在滾動而已。所以我們需要修改表格中不希望滾動的單元格的布局方式，tr和td的默認(rèn)布局方式都是static。如果要讓tr相對于div不動，那么在div中的滾動條滾動到scrollTop為100時(shí)，相對不動的tr應(yīng)該停留在相對于div左上角的(0, 100)的位置上。這個(gè)相對性我們可以用<tr style="position:relative">獲得，那么top為100怎么弄呢？顯然這就是expression的事情了，我們需要把行上的css設(shè)置為<tr style="top:expression(表格容器.scrollTop)">。這個(gè)表格容器是什么呢？就是div，使用dom的層次來查找因該是：
不過可以使用offsetParent來優(yōu)化，減少引用深度，簡化為：

    那么被鎖定的行的完整css就因該是：

    這么簡單啊？就這么簡單，不過問題當(dāng)然還是有啦。這樣的鎖定效果有兩個(gè)主要的問題：一是表格背景由于默認(rèn)是透明的，所以如果真的滾動起來，字是不動了，不過都是鏤空的重疊效果。解決辦法很簡單，就是給tr設(shè)置上背景顏色就可以啦。第二個(gè)問題，比較郁悶，搞了很久才在別人的幫助下搞定。當(dāng)tr的position為relative后，這個(gè)tr里面的td的border屬性就貌似失效了，就是不管設(shè)置什么顏色，死活都顯示不出來：
   
    后來在putee同學(xué)的幫助下，發(fā)現(xiàn)原來需要把tr中的每個(gè)td的position屬性也都設(shè)置成relative，border才能顯示出來！

    搞定了上面的表頭，我們再來搞左邊的表頭。左邊原理和上面一樣，只是被expression控制的元素是td而不是tr啦。expression中引用div的代碼就以該是：
比鎖定tr多了一個(gè)層次的引用，這是使用offsetParent來優(yōu)化和tr還不同，tr的offsetParent就是容器div；而td的offsetParent還是td，暈！所以要用this.parentElement來取offsetParent，不過這時(shí)取到的又是table，再次暈。所以這個(gè)優(yōu)化只能減少一個(gè)parent層次的引用，優(yōu)化為：

    那么被鎖定的列的完整css就因該是：

    搞定了橫縱兩個(gè)方向表頭的鎖定，結(jié)果去發(fā)現(xiàn)表頭的單元格的邊框不太對勁，怎么都是雙倍的邊線呢？我已經(jīng)設(shè)置了table-collapse為collapse，而且單元格的border設(shè)置為solid 1px blue。結(jié)果發(fā)現(xiàn)這又是position設(shè)成了relative后帶來的問題，解決辦法是只給每個(gè)表頭單元格設(shè)置border的兩個(gè)邊，比如top和left或者right和bottom。下圖是表頭單元格兩種不同border樣式設(shè)置的效果：     
    
    最后就是Grid左上角那個(gè)相對于容器div靜止的部分，當(dāng)然這個(gè)部分的tr和td除了需要同時(shí)包含上面說到的鎖定行表頭和列表頭的css expression外，還有一個(gè)問題就是這個(gè)部分的單元格的zIndex必須是表格兩個(gè)表頭中最大的，才能保證不管真么滾動表頭，始終能顯示這個(gè)部分。另外又是由于IE的問題，我們不能把左上角這個(gè)部分通過colspan和rowspan合并成一個(gè)td，如果合并那么除了第一行外的其行，將在表頭滾動時(shí)被覆蓋掉。所以這個(gè)部分的每一行仍然是一個(gè)單獨(dú)的td，只是在水平方向上作了合并優(yōu)化。

該文章在 2010/10/24 8:50:04 編輯過