<html> <head> <title>Test</title> <style type="text/css"> .divClass{ height:400px; width:25%; overflow:auto; } .divHeadClass{ overflow:hidden; } </style> </head> <body> <div id="htmlDivID" class="divClass"> <table style="word-break: break-all;background-color:#7f9db9;" border="0" cellspacing="1" cellpadding="0" > <thead> <tr style="background-color:#dfdfdf;"> <th width="20%" rowspan="1" colspan="1">Head</th> <th width="5%" rowspan="1" colspan="1">Count</th> </tr> </thead> <tbody> <tr> <td width="20%" rowspan="1">head0</td> <td width="5%" rowspan="1">0</td> </tr> <tr> <td width="20%" rowspan="1">head50</td> <td width="5%" rowspan="1">50</td> </tr> <tr> <td width="20%" rowspan="1">head05</td> <td width="5%" rowspan="1">05</td> </tr> <tr> <td width="20%" rowspan="1">head40</td> <td width="5%" rowspan="1">40</td> </tr> <tr> <td width="20%" rowspan="1">head04</td> <td width="5%" rowspan="1">04</td> </tr> <tr> <td width="20%" rowspan="1">head70</td> <td width="5%" rowspan="1">70</td> </tr> <tr> <td width="20%" rowspan="1">head07</td> <td width="5%" rowspan="1">07</td> </tr> <tr> <td width="20%" rowspan="1">head10</td> <td width="5%" rowspan="1">01</td> </tr> <tr> <td width="20%" rowspan="1">head110</td> <td width="5%" rowspan="1">011</td> </tr> <tr> <td width="20%" rowspan="1">head02</td> <td width="5%" rowspan="1">02</td> </tr> <tr> <td width="20%" rowspan="1">head03</td> <td width="5%" rowspan="1">03</td> </tr> <tr> <td width="20%" rowspan="1">head066</td> <td width="5%" rowspan="1">066</td> </tr> <tr> <td width="20%" rowspan="1">head660</td> <td width="5%" rowspan="1">60</td> </tr> <tr> <td width="20%" rowspan="1">head055</td> <td width="5%" rowspan="1">055</td> </tr> <tr> <td width="20%" rowspan="1">head0</td> <td width="5%" rowspan="1">0</td> </tr> <tr> <td width="20%" rowspan="1">head0</td> <td width="5%" rowspan="1">0</td> </tr> <tr> <td width="20%" rowspan="1">head022</td> <td width="5%" rowspan="1">022</td> </tr> <tr> <td width="20%" rowspan="1">head220</td> <td width="5%" rowspan="1">220</td> </tr> <tr> <td width="20%" rowspan="1">head055</td> <td width="5%" rowspan="1">055</td> </tr> <tr> <td width="20%" rowspan="1">head034</td> <td width="5%" rowspan="1">034</td> </tr> <tr> <td width="20%" rowspan="1">head023</td> <td width="5%" rowspan="1">023</td> </tr> <tr> <td width="20%" rowspan="1">head021</td> <td width="5%" rowspan="1">021</td> </tr> <tr> <td width="20%" rowspan="1">head210</td> <td width="5%" rowspan="1">210</td> </tr> <tr> <td width="20%" rowspan="1">head012</td> <td width="5%" rowspan="1">012</td> </tr> <tr> <td width="20%" rowspan="1">head120</td> <td width="5%" rowspan="1">120</td> </tr> <tr> <td width="20%" rowspan="1">head0111</td> <td width="5%" rowspan="1">0111</td> </tr> <tr> <td width="20%" rowspan="1">head1110</td> <td width="5%" rowspan="1">1110</td> </tr> </tbody> </table> </div> </body> <script language="javascript"> window.onload = function(){ //获得存放表格的DIV var htmlDivDom = document.getElementById("htmlDivID"); //获得表格的头部的偏移高度 var theadHeight = htmlDivDom.children[0].children[0].offsetHeight; //创建可见的头部DIV var divHeadDom = document.createElement("<div class="divHeadClass"></div>"); //将创建的头部添加到表格DIV的前面 htmlDivDom.parentNode.insertBefore(divHeadDom,htmlDivDom); //并设置其高度为表格头部的偏移高度 divHeadDom.style.height = theadHeight; //克隆表格 var htmlDivCloneDom = htmlDivDom.children[0].cloneNode(true); //将克隆表格添加到头部DIV中 divHeadDom.appendChild(htmlDivCloneDom); //设置表格的顶边距 htmlDivDom.children[0].style.marginTop = - theadHeight; //设置头部DIV的宽度：由表格DIV的偏移宽度-滚动条的宽度 if(htmlDivDom.scrollHeight > htmlDivDom.clientHeight){ var scrollWidth = getScrollWidth(); divHeadDom.style.width = htmlDivDom.offsetWidth - scrollWidth; }else{ divHeadDom.style.width = htmlDivDom.offsetWidth; } var rows = htmlDivDom.children[0].children[1].getElementsByTagName("tr"); for(var i =0,len=rows.length;i < len;i++){ if(i % 2 == 0){ rows[i].style.backgroundColor = "#f9f9f9"; }else{ rows[i].style.backgroundColor = "#e5f1ff"; } } } //创建一个DIV，添加到页面中，先得到没有滚动条的宽度，再得到有滚动条的宽度，两者的差就是滚动条的宽度 function getScrollWidth(){ var divDom = document.createElement("div"); divDom.style.cssText = "position:absolute;top:-1000;height:100px;100px;overflow:hidden;"; var noScrollWidth = document.body.appendChild(divDom).clientWidth; divDom.style.overflow = "scroll"; var scrollWidth = divDom.clientWidth; return noScrollWidth - scrollWidth; } </script> </html>
