html仿excel冻结 css,css实例:实现gridview仿excel冻结列2

css实例:实现gridview仿excel冻结列

看代码之前,先说一说思路,关键点有三:

1.               表格外要套两层div，内层的用于设置滚动条，外层的要相对定位，以便于新的子表位置设定；

2.               子表与母表的样式要完全

-

css实例:实现gridview仿excel冻结列

看代码之前,先说一说思路,关键点有三:

1.               表格外要套两层div，内层的用于设置滚动条，外层的要相对定位，以便于新的子表位置设定；

2.               子表与母表的样式要完全一致，因此，需要实现设定好GridView的样式，运行后，查看浏览器源文件，以完全复制表格的样式(提醒新手，GridView经IIS解析后，就是普通的

)

3.               复制后的子表位置要绝对定位，并设置z-index属性 以下为Gridview嵌套两层div的代码：

然后是CSS样式表：

.datagrid td {padding:4px; height:20px; text-align:center}

.fixed{ background:#fcc; z-index:2; }

.gridWidth{ width:4000px;}

.unfixed{ border:none;}

#grid {position:relative;display:block; width:90%; margin:30px auto; background:#fff; overflow:hidden;}

#gridview{position:relative;display:block;width:100%; background:#fff; overflow-y: hidden;overflow-x: scroll;}

再是JS代码(用Jquery框架)：

$(document).ready(function(){

var d=$("

var height=0;

var width=0;

d.css({position:"absolute",left:"0",top:"0",background:"#fff"});

$("#grid").append(d);

var view=$(".datagrid");

var t=$('

');

var trlist=view.find("tr");

for(var i=0;i

var tr=trlist[i];

var newTr=$('

');

newTr.append($(tr).children(".fixed").clone());

t.append(newTr);

}

d.append(t);

});