GridView固定ヘッダと先頭列

1628 ワード

css asp

GridViewに表示されるデータが非常に多い場合、ユーザーは、スクロールバーをドラッグすると、各列または行の内容が明確に理解されるように、開発者がヘッダーまたは最初の列を固定する必要があります.CSSの機能を利用してGridViewをこのような表にすることができます.
まず、GridViewをコンテナに配置し、次の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;   
}

Hexo+Githubブログcss js 404によるブログページの空白

エレメントに半ピクセルの枠線を設定する方法