<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE>scroll test</TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> 
<style>
#head{width:900;}
#head #head th{width:100;} #body{width:900;} #body td{width:100;} #scroll{width:917;display:hidden;} 
#divHead{width:300;height:20;overflow:hidden;} #divBody{width:317;height:100;overflow-x:hidden;overflow-y:scroll;} #divScroll{width:317;height:20;overflow-x:scroll;overflow-y:hidden}
</style> <script language="javascript"> function scroll(src) { //debugger; //document.all('div2').style.overflowX = 'visible'; document.all('divHead').scrollLeft = src.scrollLeft; document.all('divBody').scrollLeft = src.scrollLeft;
} //计算滚动条的宽度 window.onload=function() { var obj = document.all('scrollbar'); //debugger; var scrollWidth = obj.offsetWidth - obj.clientWidth; //alert(scrollWidth); //---- 17px obj.style.display = "none"; } </script> </HEAD> <BODY> <center> <textarea id="scrollbar" style="visibility:hidden; border-width:0;"></textarea> <table> <tr> <td> <div id="divHead"> <table border="1" id="head"> <tr> <th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>F</th><th>G</th><th>H</th><th>I</th> </tr> </table> </div> </td> </tr> <tr> <td> <div id="divBody"> <table border="1" id="body"> <tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td></tr> <tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td></tr> <tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td></tr> <tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td></tr> <tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td></tr> <tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td></tr> <tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td></tr> <tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td></tr> <tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td></tr> <tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td></tr> <tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td></tr> </table> </div> </td> </tr> <tr> <td> <div id="divScroll" onscroll="scroll(this)"> <div id="scroll"></div> </div> </td> </tr> </table> </center> </BODY></HTML>
