GridView固定表頭和首列

當GridVIEw中要顯示的數據非常多的時候，用戶常需要開發人員固定表頭或是首列，以保證在拖動滾動條的時候，可以清楚得了解到每一列或行的內容。 借助於CSS的功能，可以將GridVIEw打造成這樣的表格：

    首先，要把GridVIEw放在一個<ASP:Panel runat=server ID="panel">容器中，然後在頁面中添加如下CSS：

.fixedheader 
{     
    position:relative ; 
    table-layout:fixed;
    top:expression(this.offsetParent.scrollTop -1);   
    z-index: 10;
} 

.fixedheader th{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;}

最後將GridVIEw的HeaderStyle屬性集中的CSSClass屬性設為"fixedheader"：

<HeaderStyle Wrap="False" CSSClass="fixedheader" />

上述這種方法是以頁面的滾動條為基准，因此是“this.offsetParent.scrollTop”，實際使用時可以根據需要嘗試其他調整方法

    至於固定左邊列的方法與此類似

.fixedLeft
{     
    position: relative; 
     left:expression (this.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.scrollLeft-4);    
     z-index:10;
} 

     其中 expression後的parentElement到底要多少個，需要設置Debugger自己去跟蹤。同時，還要記住設置GridView的背景色，即便是白色也要設：#FFFFFF，不能為透明。最後，將GridVIEw的ItemStyle中的CSSClass設為"fixedLeft" ，便可得到效果了。