上篇文章中，初步探讨了利用改变表格中需要固定列的属性（与滚动条的位置关系）而实现的表格冻结列效果，但遗憾的是仅能支持IE， 和OPERA。
http://www.cnblogs.com/xiadongzq/archive/2010/04/07/1706430.html
事实上，各浏览器对表格的解析很不一样，在CSS代码中改变表格的位置属性本身就是不太明智的，好在那个项目使用人群极小，因此，IE only 凑合也能说的过去。
后来在HJ大侠的提醒下，设想了另一种思路：将表格中需要固定的列复制到另一个表中，母表与字表的样式定义要完全一致，然后将字表的位置定义死，并覆盖母表中相关的列。母表依旧随着滚动条移动，完全不做改变。（实际上是一种视觉欺骗效果）
实现该效果的关键思路在于
1. 表格外要套两层div，内层的用于设置滚动条，外层的要相对定位，以便于新的子表位置设定；
2. 子表与母表的样式要完全一致，因此，需要实现设定好GridView的样式，运行后，查看浏览器源文件，以完全复制表格的样式（提醒新手，GridView经IIS解析后，就是普通的<table> </table>）
3. 复制后的子表位置要绝对定位，并设置z-index属性
以下为Gridview嵌套两层div的代码：
<div id="grid">
<div id="gridview">
<asp:GridView ID="GridView1" runat="server" Font-Size="9pt" CssClass="datagrid">
<HeaderStyle Wrap="false" />
<RowStyle Wrap="false" />
</asp:GridView>
</div>
</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框架）：
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var d=$("<div></div>");
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 class="datagrid" cellspacing="0" rules="all" border="1" style="font-size:9pt;border-collapse:collapse;"></table>'); /*这里的table样式是在浏览器中查看GridView解析后的表格的样式，直接复制就行！*/
var trlist=view.find("tr");
for(var i=0;i<trlist.length;i++){
var tr=trlist[i];
var newTr=$('<tr style="white-space:nowrap;"></tr>'); /*这里tr的样式也一样，但要注意的是，有时gridview会隔一行换一种样式，这里的JS代码需要做一些处理*/
newTr.append($(tr).children(".fixed").clone());
t.append(newTr);
}
d.append(t);
});
</script>
效果图，与上文的无差，略去！
示例文件：/Files/xiadongzq/ScrollTable2.rar
