求“table固定多層表頭”所遇問題的解答!

　　這兩天忙於table固定多層表頭的實現，實現過程中有一個問題困擾了我很久還沒有解決，現把問題貼出來，如果哪位博友知道解決方案的話麻煩指點一下，先謝謝了！

　　未固定多表頭前圖片如下所示：

　　添加樣式固定多表頭後表頭不對齊，並且擋住顯示資料，圖片如下所示：

下面先列出我的實現步驟：（紅色字型部分為困擾我的問題）

在表頭上要固定位置，首先是需要一個容器，如果你不使用容器，則瀏覽器自身就是一個容器,要顯示捲軸，容器必須使用CSS風格overflow:auto這樣才能自動顯示捲軸，別忘了，DIV會自動成長高度，所以第一個限制條件來了:

如果要使用固定表頭的表格，表格（外部容器）的高度必須設定值。

我們填充資料到表格中，下面對資料就不展示了，只展示Header就是了。

<style>
    div.c{overflow:auto;width:600px;height:200px;border:solid 2px red; }
    table.t thead td{background-color:#ccc;font-weight:bold;}
</style>
<div class="c">
<table border="1" class="t">
    <thead>
    <tr><td>COL01</td><td>COL02</td><td>COL03</td>….</tr>
    </thead>
<tbody><tr>…..</tr></tbody>
</table>
</div>

顯示結果如下：

 

設定表頭固定則需要做以下幾個步驟

1. 設定表頭TR的位置為相對位置，這樣才能定位表頭TR到表格容器的頂部。
2. 設定表頭TR的位置TOP屬性為動態擷取的容器的位置。

我們修改TR的屬性如下

table.t thead tr{position:relative;top:expression(this.offsetParent.scrollTop);}

這個CSS使得表頭縱向固定位置了。

我們嘗試在THEAD中增加多行，也沒有問題，接下來，是該我們測試表頭跨行跨列的問題了，我們添加三行，增加了一個跨行

 

這個時候顯示的問題出現了

 

一行代碼搞定這個東東

table.t thead td{background-color:#ccc;font-weight:bold;position:relative;}

我們增加了更多的跨行跨列都測試成功

 

問題來了，我們設定在COL4上面設定ROWSPAN=2

 

出現了錯誤

 

經過不斷的測試，是類似這種情況：列上面顯示的最後一個儲存格上面設定ROWSPAN都會出現這個問題。沒有找到解決辦法，鬱悶，請知道的博友幫忙解決一下，先謝謝了。

下面試著設定固定的列位置，我簡單的寫出CSS就可以了，大家自己琢磨吧

table.t thead td.fix{position:relative;left:expression(this.parentElement.offsetParent.scrollLeft);}
    table.t tbody td.fix{position:relative;left:expression(this.parentElement.offsetParent.parentElement.scrollLeft);}

 

效果如下

 

呵呵，很混亂是不是？原因是背景和Zindex的問題，修正之後CSS為

 

還有不盡如人意的地方就是空白的地方有透明，呵呵，怎麼解決呢？還是修正CSS

 

完整CSS如下

<style>
    div.c{background-color:white;display:inline;overflow:auto;width:600px;height:200px;border:solid 2px red;}
    table.t thead td{background-color:#ccc;font-weight:bold;position:relative;}
    table.t tbody td{background-color:white;}
    table.t thead tr{z-index:100;position:relative;top:expression(this.offsetParent.scrollTop-2);}    
    table.t thead td.fix{z-index:200;background-color:red;position:relative;left:expression(this.parentElement.offsetParent.scrollLeft-2);}
    table.t tbody td.fix{z-index:50;background-color:red;position:relative;left:expression(this.parentElement.offsetParent.parentElement.scrollLeft-2);}        
</style>

表格完整指令碼如下

<div class="c">
<table border="1" class="t" cellSpacing=0 cellPadding=2 border=0>
    <thead>
        <tr><td class="fix">COL01_1</td><td rowspan="3">COL02</td><td rowSpan="2">COL03</td><td colspan="2">COL04</td>.........</tr>
        <tr><td class="fix">COL01_2</td><td>COL04</td><td>COL05</td>.........</tr>
        <tr><td class="fix">COL01_3</td><td>COL03</td><td>COL04</td><td>COL05</td>.........</tr>
    </thead>
    <tbody>
        <tr><td class="fix">ROW01</td>.........</tr>
        <tr><td class="fix">ROW02</td>.........</tr>
        <tr><td class="fix">ROW03</td>.........</tr>
        <tr><td class="fix">ROW04</td>.........</tr>
    </tbody>
</table>
</div>

資訊來源：http://www.loveayang.com.cn/post/2008/04/e59bbae5ae9ae8a1a8e5a4b4e79a84CSSe5ae9ee78eb0.aspx