在GridView中使用CSS固定上、左表头(似Excel冻结行列一样)(限IE)(含操作视频)

最新推荐文章于 2018-10-19 11:06:27 发布

zhanghongqiao

最新推荐文章于 2018-10-19 11:06:27 发布

阅读量4k

点赞数

文章标签： css excel ie xhtml webform html

网上转载的，请大家参考，原始地址： http://ithelp.ithome.com.tw/question/10030355

在GridView中使用CSS固定上、左表头(似Excel冻结行列一样)(限IE)(含操作视频)

1.首先這樣的方式並非標準的CSS語法，然而開WebForm的時候，aspx裡面都會加入一行來檢查是否是標準的格式，有這行會失敗，必須將此行刪除

檢視原始檔複製到剪貼簿列印關於

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.其次，由於GridView所產生的HTML裡面，自動會加入一個DIV，這會導致CSS中的this.parentElement.offsetParent.parentElement.scrollLeft
取錯，要修正為
this.parentElement.offsetParent.offsetParent.scrollLeft
以下為範例：
首先在樣式表中加入CSS設定

檢視原始檔複製到剪貼簿列印關於

.FixedTitleRow
{
position: relative;
table-layout:fixed;
top: expression(this.offsetParent.scrollTop-2);
background-color:White;
z-index: 10;
}
.FixedTitleRow th
{
text-overflow:ellipsis;
overflow:hidden;
white-space: nowrap;
padding:2px;
}
.FixedTitleColumn
{
position: relative;
left: expression(this.parentElement.offsetParent.scrollLeft-2);
}
.FixedDataColumn
{
position: relative;
left: expression(this.parentElement.offsetParent.offsetParent.scrollLeft-2);
}

.FixedTitleRow   
{   
    position: relative;    
    table-layout:fixed;
    top: expression(this.offsetParent.scrollTop-2);
    background-color:White;
    z-index: 10;   
}   

.FixedTitleRow th
{
    text-overflow:ellipsis;
    overflow:hidden;
    white-space: nowrap;
    padding:2px;
}
   
.FixedTitleColumn   
{   
    position: relative;    
    left: expression(this.parentElement.offsetParent.scrollLeft-2);   
}   
   
.FixedDataColumn   
{   
    position: relative;   
    left: expression(this.parentElement.offsetParent.offsetParent.scrollLeft-2);   
}

接著新增aspx檔案，記得去除

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

使用方式很簡單

固定左邊的資料行中，設定HeadStyle的CssClass=FixedTitleColumn，以及ItemStyle的CssClass=FixedDataColumn
整個GridView的HeadStyle設定CssClass=FixedTitleRow
這樣就完成了!!
設定過程錄影說明