上篇文章中，初步探讨了利用改变表格中需要固定列的属性（与滚动条的位置关系）而实现的表格冻结列效果，但遗憾的是仅能支持IE，和OPERA。

事实上，各浏览器对表格的解析很不一样，在CSS代码中改变表格的位置属性本身就是不太明智的，好在那个项目使用人群极小，因此，IE only 凑合也能说的过去。

后来在HJ大侠的提醒下，设想了另一种思路：将表格中需要固定的列复制到另一个表中，母表与字表的样式定义要完全一致，然后将字表的位置定义死，并覆盖母表中相关的列。母表依旧随着滚动条移动，完全不做改变。（实际上是一种视觉欺骗效果）

实现该效果的关键思路在于

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

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

）

3. 复制后的子表位置要绝对定位，并设置z-index属性

以下为Gridview嵌套两层div的代码：

<asp:GridView ID="GridView1" runat="server" Font-Size="9pt" CssClass="datagrid">

asp:GridView>

div>

然后是CSS样式表：

<style>

.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;}

style>

再是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=$('

'); /*这里的table样式是在浏览器中查看GridView解析后的表格的样式，直接复制就行！*/

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

for(var i=0;i

var tr=trlist[i];

var newTr=$(''); /*这里tr的样式也一样，但要注意的是，有时gridview会隔一行换一种样式，这里的JS代码需要做一些处理*/

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

t.append(newTr);

}

d.append(t);

});

script>

效果图，与上文的无差，略去！

ITPub博客

GirdView冻结列2