版本一:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style> .test{ width:300px; height:200px; overflow: auto; } #table{ width:500px; height:500px; border:1px solid #ccc; } table{ background: #fff; } </style> </head> <body> <div class="test"> <table id="table"> <thead> <tr> <th>r </th> <th>top1</th> <th>top2</th> <th>top3</th> <th>top4</th> <th>top5</th> <th>top6</th> <th>top7</th> </tr> </thead> <tbody> <tr> <td>re:1</td> <td>Jill</td> <td>Jill</td> <td>Jill</td> <td>Smith</td> <td>50</td> <td>50</td> <td>50</td> </tr> <tr> <td>re:2</td> <td>Jill</td> <td>Jill</td> <td>Jill</td> <td>Smith</td> <td>50</td> <td>50</td> <td>50</td> </tr> <tr> <td>re:3</td> <td>Jill</td> <td>Jill</td> <td>Jill</td> <td>Smith</td> <td>50</td> <td>50</td> <td>50</td> </tr> <tr> <td>re:4</td> <td>Jill</td> <td>Jill</td> <td>Jill</td> <td>Smith</td> <td>50</td> <td>50</td> <td>50</td> </tr> <tr> <td>re:5</td> <td>Jill</td> <td>Jill</td> <td>Jill</td> <td>Smith</td> <td>50</td> <td>50</td> <td>50</td> </tr> <tr> <td>re:6</td> <td>Jill</td> <td>Jill</td> <td>Jill</td> <td>Smith</td> <td>50</td> <td>50</td> <td>50</td> </tr> <tr> <td>re:7</td> <td>Jill</td> <td>Jill</td> <td>Jill</td> <td>Smith</td> <td>50</td> <td>50</td> <td>50</td> </tr> <tr> <td>re:8</td> <td>Jill</td> <td>Jill</td> <td>Jill</td> <td>Smith</td> <td>50</td> <td>50</td> <td>50</td> </tr> <tr> <td>re:9</td> <td>Jill</td> <td>Jill</td> <td>Jill</td> <td>Smith</td> <td>50</td> <td>50</td> <td>50</td> </tr> <tr> <td>re:10</td> <td>Jill</td> <td>Jill</td> <td>Jill</td> <td>Smith</td> <td>50</td> <td>50</td> <td>50</td> </tr> </tbody> </table> </div> <script type="text/javascript"> (function(){ //dome //支持参数 ID 或 CLASS table_fixed_nav(table); //dome function table_fixed_nav(id){ if(typeof id == 'object'){ table=id; }else{ if(id.indexOf('.')==0){ var adom=document.getElementsByTagName("*"), i=0, reg=new RegExp('(^| )'+id.substring(1)+'( |$)'), ps=[]; for(;i<adom.length;i++){ var t=adom[i], clsname=t.className; if(reg.test(clsname)){ ps.push(t); } } for(i=0;i<ps.length;i++){ table_fixed_nav(ps[i]); } return ; }else{ var table=document.getElementById(id); } } if(!(table&&table.tagName.toLowerCase()=='table')) return false; var num2px=function(num){ return ''+num+'px'; }, px2num=function(px){ return parseInt(px.replace('px','')); }, getw=function(node){ var sw=function(node){ if(node.currentStyle) return px2num(node.currentStyle.width); else if (window.getComputedStyle) return px2num(window.getComputedStyle(node).width); else return px2num(node.style.width); }(node); var lw=px2num(node.style.borderLeftWidth)||1, rw=px2num(node.style.borderLeftWidth)||1; return sw||(node.offsetWidth-lw-rw); }, geth=function(node){ var sh=function(node){ if(node.currentStyle) return px2num(node.currentStyle.height); else if (window.getComputedStyle) return px2num(window.getComputedStyle(node).height); else return px2num(node.style.height); }(node); var tw=px2num(node.style.borderTopWidth)||1, bw=px2num(node.style.borderBottomWidth)||1; return sh||(node.offsetHeight-tw-bw); }, addlistener=function(node,event,fn){ if(node.addEventListener) node.addEventListener(event,fn,false); else if(node.attachEvent) node.attachEvent('on'+event,fn); }, cpcss=function(node,attr){ if(node.currentStyle) return node.currentStyle[attr]; else if (window.getComputedStyle) return window.getComputedStyle(node)[attr]; } ; var div_style={//wrap style position:'relative' }, wrap=document.createElement('div'); for(k in div_style){ wrap.style[k]=div_style[k]; } var pwrap=table.parentNode; pwrap.insertBefore(wrap,table); wrap.appendChild(table); wrap.style.width=num2px(getw(pwrap)); wrap.style.height=num2px(geth(pwrap)); wrap.style.zIndex='1'; wrap.style.overflow=function(){ if(pwrap.currentStyle) return pwrap.currentStyle.overflow; else if (window.getComputedStyle) return window.getComputedStyle(pwrap).overflow; }(); /*wrap.style.borderLeftWidth=cpcss(table,'borderLeftWidth'); wrap.style.borderTopWidth=cpcss(table,'borderTopWidth'); wrap.style.borderBottomWidth=cpcss(table,'borderBottomWidth'); wrap.style.borderRightWidth=cpcss(table,'borderRightWidth'); wrap.style.borderLeftStyle=cpcss(table,'borderLeftStyle'); wrap.style.borderTopStyle=cpcss(table,'borderTopStyle'); wrap.style.borderBottomStyle=cpcss(table,'borderBottomStyle'); wrap.style.borderRightStyle=cpcss(table,'borderRightStyle'); wrap.style.borderLeftColor=cpcss(table,'borderLeftColor'); wrap.style.borderTopColor=cpcss(table,'borderTopColor'); wrap.style.borderBottomColor=cpcss(table,'borderBottomColor'); wrap.style.borderRightColor=cpcss(table,'borderRightColor');*/ pwrap.style.overflow="hidden"; //copy top var rowtable=table.cloneNode(true); rowtable.removeAttribute('id'); rowtable.style.position='absolute'; rowtable.style.left='0px'; rowtable.style.top='0px'; rowtable.style.zIndex='2'; rowtable.style.border='0px'; wrap.appendChild(rowtable); rowtable.style.width=num2px(getw(table)); var i=1, rows=rowtable.rows, len=rows.length; for(;i<len;i++){ var row=rows[1]; row.parentNode.removeChild(row); } var ch=rows[0].childNodes, len=ch.length, i=0; for(;i<len;i++){ var otd=table.rows[0].childNodes[i], std=ch[i]; if(std.nodeType==1){ std.style.width=num2px(getw(otd)); std.style.height=num2px(geth(otd)); } } //copy left var celtable=table.cloneNode(true); celtable.removeAttribute('id'); celtable.style.position='absolute'; celtable.style.left='0px'; celtable.style.top='0px'; celtable.style.zIndex='2'; celtable.style.border='0px'; wrap.appendChild(celtable); celtable.style.height=num2px(geth(table)); var rows=celtable.rows,i=0; for(;i<rows.length;i++){ var first=false, fcs=rows[i].childNodes, j=0, len=fcs.length; for(;j<len;j++){ var fc=fcs[0]; if(fc.nodeType==1){ if(!first){ otd=table.rows[i].childNodes[j]; fc.style.width=num2px(getw(otd)); fc.style.height=num2px(geth(otd)); first=true; }else{ var ns=fc.nextSibling; ns.parentNode.removeChild(ns); } }else{ fc.parentNode.removeChild(fc); } } } var tittable=table.cloneNode(true); tittable.removeAttribute('id'); tittable.style.position='absolute'; tittable.style.left='0px'; tittable.style.top='0px'; tittable.style.zIndex='3'; tittable.style.border='0px'; wrap.appendChild(tittable); var rows=tittable.rows,i=0; for(;i<rows.length;i++){ var first=false, fcs=rows[i].childNodes, j=0, len=fcs.length; for(;j<len;j++){ var fc=fcs[0]; if(fc.nodeType==1){ if(!first){ otd=table.rows[i].childNodes[j]; fc.style.width=num2px(getw(otd)); fc.style.height=num2px(geth(otd)); first=true; }else{ var ns=fc.nextSibling; ns.parentNode.removeChild(ns); } }else{ fc.parentNode.removeChild(fc); } } } var i=1, rows=tittable.rows, len=rows.length; for(;i<len;i++){ var row=rows[1]; row.parentNode.removeChild(row); } tittable_pleft=px2num(cpcss(table,'borderLeftWidth'))+px2num(cpcss(table,'borderRightWidth')); tittable.style.left=num2px(-tittable_pleft); //bind event addlistener(wrap,'scroll',function(){ var top=wrap.scrollTop, left=wrap.scrollLeft; rowtable.style.top=num2px(top); celtable.style.left=num2px(left); tittable.style.top=num2px(top); tittable.style.left=num2px(left-tittable_pleft); }); table.style.border='0px'; } })(); </script> </body> </html>
缺点:CHROME IE 浏览器 改变TOP LEFT会震动
修改以下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style> .test{ width:200px; height:150px; } .table{ width:500px; height:500px; } table{ background: #fff; } </style> </head> <body> <div class="test"> <table class="table"> <thead> <tr> <th>r </th> <th>top1</th> <th>top2</th> <th>top3</th> <th>top4</th> <th>top5</th> <th>top6</th> <th>top7</th> </tr> </thead> <tbody> <tr> <td>re:1</td> <td>Jill</td> <td>Jill</td> <td>Jill</td> <td>Smith</td> <td>50</td> <td>50</td> <td>50</td> </tr> <tr> <td>re:2</td> <td>Jill</td> <td>Jill</td> <td>Jill</td> <td>Smith</td> <td>50</td> <td>50</td> <td>50</td> </tr> <tr> <td>re:3</td> <td>Jill</td> <td>Jill</td> <td>Jill</td> <td>Smith</td> <td>50</td> <td>50</td> <td>50</td> </tr> <tr> <td>re:4</td> <td>Jill</td> <td>Jill</td> <td>Jill</td> <td>Smith</td> <td>50</td> <td>50</td> <td>50</td> </tr> <tr> <td>re:5</td> <td>Jill</td> <td>Jill</td> <td>Jill</td> <td>Smith</td> <td>50</td> <td>50</td> <td>50</td> </tr> <tr> <td>re:6</td> <td>Jill</td> <td>Jill</td> <td>Jill</td> <td>Smith</td> <td>50</td> <td>50</td> <td>50</td> </tr> <tr> <td>re:7</td> <td>Jill</td> <td>Jill</td> <td>Jill</td> <td>Smith</td> <td>50</td> <td>50</td> <td>50</td> </tr> <tr> <td>re:8</td> <td>Jill</td> <td>Jill</td> <td>Jill</td> <td>Smith</td> <td>50</td> <td>50</td> <td>50</td> </tr> <tr> <td>re:9</td> <td>Jill</td> <td>Jill</td> <td>Jill</td> <td>Smith</td> <td>50</td> <td>50</td> <td>50</td> </tr> <tr> <td>re:10</td> <td>Jill</td> <td>Jill</td> <td>Jill</td> <td>Smith</td> <td>50</td> <td>50</td> <td>50</td> </tr> </tbody> </table> </div> <script type="text/javascript"> (function(){ //dome //支持参数 ID 或 CLASS table_fixed_nav('.table'); //dome function table_fixed_nav(id){ if(typeof id == 'object'){ table=id; }else{ if(id.indexOf('.')==0){ var adom=document.getElementsByTagName("*"), i=0, reg=new RegExp('(^| )'+id.substring(1)+'( |$)'), ps=[]; for(;i<adom.length;i++){ var t=adom[i], clsname=t.className; if(reg.test(clsname)){ ps.push(t); } } for(i=0;i<ps.length;i++){ table_fixed_nav(ps[i]); } return ; }else{ var table=document.getElementById(id); } } if(!(table&&table.tagName.toLowerCase()=='table')) return false; var num2px=function(num){ return ''+num+'px'; }, px2num=function(px){ return parseInt(px.replace('px','')); }, getw=function(node){ var sw=function(node){ if(node.currentStyle) return px2num(node.currentStyle.width); else if (window.getComputedStyle) return px2num(window.getComputedStyle(node).width); else return px2num(node.style.width); }(node); var lw=px2num(node.style.borderLeftWidth)||1, rw=px2num(node.style.borderLeftWidth)||1; return sw||(node.offsetWidth-lw-rw); }, geth=function(node){ var sh=function(node){ if(node.currentStyle) return px2num(node.currentStyle.height); else if (window.getComputedStyle) return px2num(window.getComputedStyle(node).height); else return px2num(node.style.height); }(node); var tw=px2num(node.style.borderTopWidth)||1, bw=px2num(node.style.borderBottomWidth)||1; return sh||(node.offsetHeight-tw-bw); }, addlistener=function(node,event,fn){ if(node.addEventListener) node.addEventListener(event,fn,false); else if(node.attachEvent) node.attachEvent('on'+event,fn); }, cpcss=function(node,attr){ if(node.currentStyle) return node.currentStyle[attr]; else if (window.getComputedStyle) return window.getComputedStyle(node)[attr]; }, create_wrap=function(pwrap,table){ var div_style={//public style position:'relative' }, wrap=document.createElement('div'); for(k in div_style){ wrap.style[k]=div_style[k]; } pwrap.appendChild(wrap); wrap.appendChild(table); return wrap; } ; var pwrap=table.parentNode; pwrap.style.overflow="hidden"; pwrap.style.position="relative"; var fix_w=function(){ var nds=table.rows[0].firstChild; while(nds){ if(nds.nodeType==1){ return num2px(getw(nds)) } nds=nds.nextSibling; } }(), fix_h=function(){ var nds=table.rows[0].firstChild; while(nds){ if(nds.nodeType==1){ return num2px(geth(nds)) } nds=nds.nextSibling; } }(); var tittable=table.cloneNode(true), titwrap=create_wrap(pwrap,tittable); tittable.removeAttribute('id'); titwrap.style.position='absolute'; titwrap.style.left='0px'; titwrap.style.top='0px'; titwrap.style.zIndex='5'; titwrap.style.overflow='hidden'; titwrap.style.width=fix_w; titwrap.style.height=fix_h; var rowtable=table.cloneNode(true), rowwrap=create_wrap(pwrap,rowtable); rowtable.removeAttribute('id'); rowwrap.style.position='absolute'; rowwrap.style.left='0px'; rowwrap.style.top='0px'; rowwrap.style.zIndex='4'; rowwrap.scrollTop=0; rowwrap.style.height=fix_h; rowwrap.style.width=num2px(getw(pwrap)); rowwrap.style.overflow='hidden'; var clotable=table.cloneNode(true), clowrap=create_wrap(pwrap,clotable); clotable.removeAttribute('id'); clowrap.style.position='absolute'; clowrap.style.left='0px'; clowrap.style.top='0px'; clowrap.style.zIndex='4'; clowrap.style.width=fix_w; clowrap.style.height=num2px(geth(pwrap)); clowrap.style.overflow='hidden'; clowrap.scrollTop=0; var wrap=create_wrap(pwrap,table); wrap.style.width=num2px(getw(pwrap)); wrap.style.height=num2px(geth(pwrap)); wrap.style.position='absolute'; wrap.style.left='0px'; wrap.style.top='0px'; wrap.style.zIndex='3'; wrap.style.overflow='auto'; wrap.style.height=num2px(geth(pwrap)); wrap.style.width=num2px(getw(pwrap)); var scro_h=wrap.offsetHeight-wrap.clientHeight, scro_w=wrap.offsetWidth-wrap.clientWidth; //fix scroll width height rowwrap.style.width=num2px(getw(pwrap)-scro_w); clowrap.style.height=num2px(geth(pwrap)-scro_h); addlistener(wrap,'scroll',function(){ clowrap.scrollTop=wrap.scrollTop; rowwrap.scrollLeft=wrap.scrollLeft; }); } })(); </script> </body> </html>
版本二参考:http://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html
修改scrolltop 跟scrollLeft不会...