原理,设置两张表格,并使两张表格重叠,这应用到z-index属性,一个表格在下面,另一个表格在上面,使下面的表格的父级div设置属性overflow,,这样就行了, 注意《z-index使用时,要用到position这个属性。 代码如下;<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <mce:script src="script/jquery-1.4.3.js" mce_src="script/jquery-1.4.3.js" type="text/javascript"></mce:script> <link href="mouse.css" mce_href="mouse.css" rel="stylesheet" type="text/css" /> <mce:script type="text/javascript"><!-- $(function () { var i = 0; var j = 0; $("#tenter").mouseenter(function () { i = i + 1; $("#enter").html(i); }); $("#tenter").mouseleave(function () { i = i - 1; $("#enter").html(i); }); $("#tover").mouseover(function () { j= j + 1; $("#over").html(j); }); $("#tover").mouseout(function () { j = j - 1; $("#over").html(j); }); $("#tbodyHide").hide(); }) // --></mce:script> <mce:style type="text/css"><!-- #table1 { } #table2 { } #div1 { position:absolute; overflow:scroll; z-index:2; height:300px; } #div2 { position:absolute; z-index:3; } #tover { display:table-header-group; } body { padding:0px; margin:0px; } table { border-collapse:collapse; border:2px solid red; width:300px; height:200px; } table th { border:3px dashed blue; } table td { border:1px ridge red; } tbody { display:table-row-group; } --></mce:style><style type="text/css" mce_bogus="1"> #table1 { } #table2 { } #div1 { position:absolute; overflow:scroll; z-index:2; height:300px; } #div2 { position:absolute; z-index:3; } #tover { display:table-header-group; } body { padding:0px; margin:0px; } table { border-collapse:collapse; border:2px solid red; width:300px; height:200px; } table th { border:3px dashed blue; } table td { border:1px ridge red; } tbody { display:table-row-group; } </style> </head> <body> <div id="div1"> <table id="table1"> <thead id="tenter"> <tr> <th>1 </th><th>2 </th><th> 3</th> </tr> </thead> <tbody> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> </tbody> </table></div> <div id="div2"> <table id="table2"> <thead id="tover"> <tr> <th>1</th><th >2</th><th>3</th> </tr> </thead> <tbody id="tbodyHide"> <tr><td>1</td><td>2</td><td>3</td></tr> </tbody> </table></div> </body> </html>