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" ，便可得到效果了。

 

<HeaderStyle CssClass="fixed" />
.fixed   
{
background-color:White;
      position:   relative     ;   
      top:expression(this.offsetParent.scrollTop);   
      left:expression(this.offsetParent.scrollLeft);   
      z-index:2;   
}