2011-03-14 82 views
0

我想實現一個固定的標題功能除了現有的GridView,SGridView的子類。使用滾動條固定表格標題IE8中的GridView中

我的問題是,使用下面列出的解決方案,滾動條出現在標題行下面,看起來很俗氣。我寧願滾動條通過頁眉垂直運行到頁腳。唯一的問題是,這意味着第一對行將被標題覆蓋,因爲滾動條高度不包含標題行(我認爲這是絕對定位的副作用)。任何想法如何糾正?

我的解決方案由以下部分組成:

<div class="IEScrollDiv"> 
<table class="GridView"> 
    <thead> 
    <tr> <th clas="GVHeader"> my header row</th> </tr> 
    </thead> 
    <tbody> 
    ... 
    </tbody> 
</table> 
</table> 

更多或更少的,增加了額外的代碼插入到渲染()方法來包裝的表中可以滾動一個div。沒什麼太花哨。然後,我將表格配置爲渲染,併爲可訪問性添加標籤。

因爲在IE中添加滾動到tbody是未定義的,所以我無法利用它來創建一個固定的標題(跛腳)。另外,表達式css規則已經從IE8中棄用了,所以我不能使用這種方法(大量的在線教程利用它)。

所以,我通過它的類GVHeader將javascript添加到絕對定位標題行。

感謝

+0

也許下邊距添加到滾動DIV ..然後將標題行到保證金區域??? – 2011-03-14 20:58:07

回答

0

對於那些誰可能最終希望實現類似的東西,以爲我會後我的解決方案。

我無法得到我想要的確切樣子(滾動條穿過標題,而是在它旁邊)。

我只是讓gridview渲染一個空的div,並帶上一個類,使它的x個像素高到包含標題的間隙空間。然後只是將該標題重新定位在該div的頂部。現在滾動條包含標題行作爲高度的一部分。

這樣的標記看起來像這樣到底

<div class="IEScrollDiv"> 
<div class="EmptyDiv"></div> 
<table class="GridView"> 
    <thead> 
    <tr> <th clas="GVHeader"> my header row</th> </tr> 
    </thead> 
    <tbody> 
    ... 
    </tbody> 
</table> 
</table> 

.EmptyDiv 
{ 
    height: 33px; 
    margin: 0; 
    padding: 0; 
    background: #ffffff; 
}