做了一个网页，将gridview放在一个限定了高和宽的panel中，由于数据多时panel会出现滚动条，，怎么让GridView的Footer和Header一直显示在屏幕上，看了网上的一些例子，css中要用到expression ，但在IE8中已经不能用expression ，我的gridview的列是后台动态生成的，怎么做才能固定表头啊，如果还能固定gridview左边开始的列就更好了？求助
------解决方案--------------------------------------------------------
表头固定？ 看看这篇文章。。。。。。。。。。
- HTML code
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>JavaScript Table行定位效果</title><script type="text/javascript" src="CJL.0.1.min.js"></script><script>var TableFixed = function(table, options){ this._oTable = $$(table);//原table this._nTable = this._oTable.cloneNode(false);//新table this._nTable.id = "";//避免id冲突 this._oTablePos = {};//记录原table坐标参数 this._oRowPos = {};//记录原tr坐标参数 this._viewHeight = this._oTableHeight = this._nTableHeight = 0;//记录高度 this._nTableViewTop = 0;//记录新table视框top this._selects = [];//select集合，用于ie6覆盖select this._setOptions(options); this._index = this.options.index; this._pos = this.options.pos; this.auto = !!this.options.auto; this.hide = !!this.options.hide; $$E.addEvent(window, "resize", $$F.bind( this.setPos, this )); $$E.addEvent(window, "scroll", $$F.bind( this.run, this )); this._oTable.parentNode.insertBefore(this._nTable, this._oTable); this.clone();};TableFixed.prototype = { //chrome/safari透明用rgba(0, 0, 0, 0) _transparent: $$B.chrome || $$B.safari ? "rgba(0, 0, 0, 0)" : "transparent", //设置默认属性 _setOptions: function(options) { this.options = {//默认值 index: 0,//tr索引 auto: true,//是否自动定位 pos: 0,//自定义定位位置百分比(0到1) hide: false//是否隐藏（不显示） }; $$.extend(this.options, options || {}); }, //克隆表格 clone: function(index) { //设置table样式 $$D.setStyle(this._nTable, { width: this._oTable.offsetWidth + "px", position: $$B.ie6 ? "absolute" : "fixed", zIndex: 99, borderTopWidth: 0, borderBottomWidth: 0 }); //设置index this._index = Math.max(0, Math.min(this._oTable.rows.length - 1, isNaN(index) ? this._index : index)); //克隆新行 this._oRow = this._oTable.rows[this._index]; var oT = this._oRow, nT = oT.cloneNode(true); if( oT.parentNode != this._oTable ){ nT = oT.parentNode.cloneNode(false).appendChild(nT).parentNode; } //插入新行 if ( this._nTable.firstChild ) { this._nTable.replaceChild( nT, this._nTable.firstChild ); } else { this._nTable.appendChild(nT); } //去掉table上面和下面的边框 if ( this._oTable.border > 0 ) { switch (this._oTable.frame) { case "above" : case "below" : case "hsides" : this._nTable.frame = "void"; break; case "" : case "border" : case "box" : this._nTable.frame = "vsides"; break; } } //设置td样式 var nTds = this._nTable.rows[0].cells, getStyle = $$D.getStyle; $$A.forEach(this._oRow.cells, $$F.bind(function(o, i){ var style = nTds[i].style; //设置td背景 style.backgroundColor = this._getBgColor(o); //设置td的width,没考虑ie8/chrome设scroll的情况 style.width = (document.defaultView ? parseFloat(getStyle(o, "width")) : ( o.clientWidth - parseInt(getStyle(o, "paddingLeft")) - parseInt(getStyle(o, "paddingRight")) )) + "px"; }, this)); //获取table高度 this._oTableHeight = this._oTable.offsetHeight; this._nTableHeight = this._nTable.offsetHeight; //设置坐标属性 this._oTablePos = $$D.rect(this._oTable);//获取原table位置 this._oRowPos = $$D.rect(this._oRow);//获取原tr位置 this.setPos(); }, //获取背景色 _getBgColor: function(node) { var bgc = ""; //不要透明背景（没考虑图片背景） while (bgc === this._transparent && (node = node.parentNode) != document) { bgc = $$D.getStyle(node, "backgroundColor"); } return bgc === this._transparent ? "#fff" : bgc; }, //设置新table位置属性 setPos: function(pos) { //设置pos this._pos = Math.max(0, Math.min(1, isNaN(pos) ? this._pos : pos)); //获取位置 this._viewHeight = document.documentElement.clientHeight; this._nTableViewTop = (this._viewHeight - this._nTableHeight) * this._pos; this.run(); }, //运行 run: function() { var tStyle = this._nTable.style; if(!this.hide){ var top = $$D.getScrollTop(), left = $$D.getScrollLeft() //原tr是否超过顶部和底部 ,outViewTop = this._oRowPos.top < top, outViewBottom = this._oRowPos.bottom > top + this._viewHeight; //原tr超过视窗范围 if ( outViewTop || outViewBottom ) { var viewTop = !this.auto ? this._nTableViewTop : (outViewTop ? 0 : (this._viewHeight - this._nTableHeight))//视窗top ,posTop = viewTop + top;//位置top //在原table范围内 if( posTop > this._oTablePos.top && posTop + this._nTableHeight < this._oTablePos.bottom ){ //定位 if( $$B.ie6 ){ tStyle.top = posTop + "px"; tStyle.left = this._oTablePos.left + "px"; setTimeout($$F.bind(this._setSelect, this), 0);//iebug }else{ tStyle.top = viewTop + "px"; tStyle.left = this._oTablePos.left - left + "px"; } return; } } } //隐藏 tStyle.top = "-99999px"; $$B.ie6 && this._resetSelect(); }, //设置select集合 _setSelect: function() { this._resetSelect(); var rect = $$D.clientRect(this._nTable); //把需要隐藏的放到_selects集合 this._selects = $$A.filter(this._oTable.getElementsByTagName("select"), $$F.bind(function(o){ var r = $$D.clientRect(o); if(r.top <= rect.bottom && r.bottom >= rect.top){ o._count ? o._count++ : (o._count = 1);//防止多个实例冲突 //设置隐藏 var visi = o.style.visibility; if(visi != "hidden"){ o._css = visi; o.style.visibility = "hidden"; } return true; } }, this)) }, //恢复select样式 _resetSelect: function() { $$A.forEach( this._selects, function(o){ !--o._count && ( o.style.visibility = o._css ); } ); this._selects = []; }};</script></head><div id="t"></div><body style="height:1000px; width:1000px; padding-top:100px;"><style type="text/css">.tablefixed{width:600px; border-collapse:collapse;}.tablefixed td{ border:5px solid #999; padding:10px;}.tablefixed thead, .tablefixed tfoot{ background:#CCC;}</style><table id="idTableFixed" class="tablefixed"> <thead> <tr> <td width="50"></td> <td>表头</td> <td width="100"></td> </tr> </thead> <tr> <td></td> <td><a href="#">图片滑动切换效果</a></td> <td></td> </tr> <tr> <td></td> <td><a href="#">图片变换效果(ie only)</a></td> <td></td> </tr> <tr> <td></td> <td><a href="#">图片切割效果</a></td> <td></td> </tr> <tr> <td></td> <td><a href="#">仿LightBox内容显示效果</a></td> <td></td> </tr> <tr> <td></td> <td><a href="#">图片滑动展示效果</a></td> <td></td> </tr> <tr> <td></td> <td><a href="#">仿163网盘无刷新文件上传系统</a></td> <td></td> </tr> <tr> <td></td> <td><a href="#">拖放效果</a></td> <td></td> </tr> <tr> <td></td> <td><a href="#">图片切割系统</a></td> <td></td> </tr> <tr> <td></td> <td><a href="#">自定义多级联动浮动菜单</a></td> <td></td> </tr> <tr> <td></td> <td><a href="#">滑动条效果</a></td> <td></td> </tr> <tfoot> <tr> <td></td> <td>表尾</td> <td></td> </tr> </tfoot></table><br />点击行选择克隆行：当前克隆第 <span id="idIndex">1</span> 行<br /><br /><input id="idPos" type="button" value="指定中间位置" /><input id="idHide" type="button" value="取消定位" /><br /><br />ps：为方便预览，建议缩小浏览器。<br /><br />注意，使用ie8的兼容性视图会有偏移。<script>var tf = new TableFixed("idTableFixed");$$A.forEach($$("idTableFixed").rows, function(o, i){ var n = i + 1; o.cells[0].innerHTML = n; o.cells[2].innerHTML = n % 4 ? " " : "<select><option>test</option></select>"; o.onclick = function(){ $$("idIndex").innerHTML = n; tf.auto = true; tf.clone(i); }});tf.clone();//表格结构修改后应重新clone一次$$("idPos").onclick = function(){ tf.auto = false; tf.setPos(.5);}$$("idHide").onclick = function(){ if(tf.hide){ tf.hide = false; this.value = "取消定位"; }else{ tf.hide = true; this.value = "显示定位"; } tf.run();}</script></body></html>