固定表头表格

<!-- 固定表头表格 首贴www.51js.com 作者:LQY169 使用转载请保留 --> <mce:style type=text/css><!-- .griddiv{ overflow-x:hidden; border:black 1px solid; BACKGROUND: #F8F9FC; } .title { BORDER-RIGHT: #555 1px solid; BORDER-TOP: #fff 1px solid; BORDER-BOTTOM: #555 1px solid; BORDER-LEFT: #fff 1px solid; padding:2 1 2 2; BACKGROUND: #ccc; CURSOR: hand; Font-Size:9pt; overflow:hidden; WHITE-SPACE: nowrap } td{ WHITE-SPACE: nowrap; BORDER-RIGHT: #ddd 1px solid; BORDER-TOP: #ddd 1px solid; } .cdata { padding:1 1 1 2; bgColor:expression(this.bgColor=((this.rowIndex)%2==0 )? '#FFFFFF' : '#cccccc'); Font-Size:9pt; } --></mce:style><style type=text/css mce_bogus="1">.griddiv{ overflow-x:hidden; border:black 1px solid; BACKGROUND: #F8F9FC; } .title { BORDER-RIGHT: #555 1px solid; BORDER-TOP: #fff 1px solid; BORDER-BOTTOM: #555 1px solid; BORDER-LEFT: #fff 1px solid; padding:2 1 2 2; BACKGROUND: #ccc; CURSOR: hand; Font-Size:9pt; overflow:hidden; WHITE-SPACE: nowrap } td{ WHITE-SPACE: nowrap; BORDER-RIGHT: #ddd 1px solid; BORDER-TOP: #ddd 1px solid; } .cdata { padding:1 1 1 2; bgColor:expression(this.bgColor=((this.rowIndex)%2==0 )? '#FFFFFF' : '#cccccc'); Font-Size:9pt; }</style> <div class='griddiv' id='griddiv'> <div id="titlediv" style="position:relative;" mce_style="position:relative;"></div> <div id="tablediv" style="overflow-x:scroll;overflow-y:scroll" mce_style="overflow-x:scroll;overflow-y:scroll" onscroll='SYNC_Roll(this)'> <table id="tb" width='100%' border="0" cellpadding="0" cellspacing="0"> <tr id="titletr"><td>标题1</td><td>标题2</td><td>标题3</td></tr> <tr class='cdata'><td>内容1内容1内容1内容1内容1内容</td><td nowrap>内容2</td><td nowrap>内容3222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</td></tr> <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr> <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr> <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr> <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr> <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr> <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr> <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr> <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr> <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr> <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr> <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr> <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr> <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr> <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr> <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr> <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr> <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr> <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr> <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr> <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr> <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr> <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr> <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr> <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr> <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td></tr> </table> </div> <div> <mce:script language=javascript><!-- function createtitle(tdiv,ttb,ttr){ tdiv.style.width=ttb.clientWidth; var newtit=""; for(i=0;i<titletr.cells.length;i++) { ttd=titletr.cells[i]; newtit=newtit+"<span class='title' style='width:"+(ttd.clientWidth+1)+"px'>"+ttd.innerText+"</span>" } tdiv.innerHTML=newtit; titletr.style.visibility = "hidden"; if (ttr.rowIndex!=ttb.rows.length-1) ttb.moveRow(ttr.rowIndex,ttb.rows.length-1); } function SYNC_Roll(obj){ titlediv.style.posLeft=-obj.scrollLeft; } function SetGrid(awidth,aheight){ var gdiv=document.getElementById("griddiv"); titdiv=document.getElementById("titlediv"); ttbdiv=document.getElementById("tablediv"); ttb=document.getElementById("tb"); ttr=document.getElementById("titletr"); gdiv.style.pixelWidth=awidth; tablediv.style.pixelWidth=awidth; tablediv.style.pixelHeight=aheight; createtitle(titdiv,ttb,ttr); } SetGrid(500,300); // --></mce:script>

 

<table cellspacing="1" bgcolor="#000000" cellpadding="0" border="0"> <tr> <td bgcolor="#cecece" width="50" height="20">Title</td> <td bgcolor="#cecece" width="50" height="20">Title</td> <td bgcolor="#cecece" width="50" height="20">Title</td> <td bgcolor="#cecece" width="50" height="20">Title</td> <td bgcolor="#cecece" width="17" height="20"></td> </tr> </table> <div style="width:222px;height:100px;overflow-y:scroll;"> <table cellspacing="1" bgcolor="#cecece" cellpadding="0" border="0"> <tr> <td bgcolor="#ffffff" width="50" height="20">Cell</td> <td bgcolor="#ffffff" width="50" height="20">Cell</td> <td bgcolor="#ffffff" width="50" height="20">Cell</td> <td bgcolor="#ffffff" width="50" height="20">Cell</td> </tr> <tr> <td bgcolor="#ffffff" width="50" height="20">Cell</td> <td bgcolor="#ffffff" width="50" height="20">Cell</td> <td bgcolor="#ffffff" width="50" height="20">Cell</td> <td bgcolor="#ffffff" width="50" height="20">Cell</td> </tr> <tr> <td bgcolor="#ffffff" width="50" height="20">Cell</td> <td bgcolor="#ffffff" width="50" height="20">Cell</td> <td bgcolor="#ffffff" width="50" height="20">Cell</td> <td bgcolor="#ffffff" width="50" height="20">Cell</td> </tr> <tr> <td bgcolor="#ffffff" width="50" height="20">Cell</td> <td bgcolor="#ffffff" width="50" height="20">Cell</td> <td bgcolor="#ffffff" width="50" height="20">Cell</td> <td bgcolor="#ffffff" width="50" height="20">Cell</td> </tr> <tr> <td bgcolor="#ffffff" width="50" height="20">Cell</td> <td bgcolor="#ffffff" width="50" height="20">Cell</td> <td bgcolor="#ffffff" width="50" height="20">Cell</td> <td bgcolor="#ffffff" width="50" height="20">Cell</td> </tr> <tr> <td bgcolor="#ffffff" width="50" height="20">Cell</td> <td bgcolor="#ffffff" width="50" height="20">Cell</td> <td bgcolor="#ffffff" width="50" height="20">Cell</td> <td bgcolor="#ffffff" width="50" height="20">Cell</td> </tr> <tr> <td bgcolor="#ffffff" width="50" height="20">Cell</td> <td bgcolor="#ffffff" width="50" height="20">Cell</td> <td bgcolor="#ffffff" width="50" height="20">Cell</td> <td bgcolor="#ffffff" width="50" height="20">Cell</td> </tr> <tr> <td bgcolor="#ffffff" width="50" height="20">Cell</td> <td bgcolor="#ffffff" width="50" height="20">Cell</td> <td bgcolor="#ffffff" width="50" height="20">Cell</td> <td bgcolor="#ffffff" width="50" height="20">Cell</td> </tr> <tr> <td bgcolor="#ffffff" width="50" height="20">Cell</td> <td bgcolor="#ffffff" width="50" height="20">Cell</td> <td bgcolor="#ffffff" width="50" height="20">Cell</td> <td bgcolor="#ffffff" width="50" height="20">Cell</td> </tr> </table> </div>