我有一个页面，其中包含一个包含大量数据的表格的div。该div具有overflow-x:hidden;overflow-y:scroll;的溢出值。你只需要使用此div的滚动条来滚动，而不是页面滚动。但是，当你滚动时，表头（thead）是固定的，并且停留在div的顶部，但它遮住了滚动条。
我希望表格表头能够占据整个带有滚动条的div, 但它不应该覆盖滚动条。
我已在Chrome、Firefox和IE9中进行了测试，它们看起来都一样！
HTML
<div style='position:absolute;bottom:0;height:396px;width:100%;overflow-y:scroll;overflow-x:hidden;'>
<table id='select-customer-results' style='margin-top:-1px;position:fixed;width:100%;'>
<tr>
<th style='width:15%;'>Code</th>
<th style='width:85%;'>Name</th>
</tr>
</table>
<div style='height:37px;'></div>
<table id='select-customer-results'>
<!--A lot of rows!-->
</table>
</div>
CSS
table#select-customer-results{
width:100%;
margin-top:-5px;
}
table#select-customer-results tr{
border-bottom:1px solid #797979;
}
table#select-customer-results tr:nth-child(even){
background:#EBF2F7;
}
table#select-customer-results td,table#select-customer-results th{
font-family:Helvetica, Arial, sans-serif;
padding:5px;
border:1px solid #797979;
}
table#select-customer-results td{
cursor:pointer;
}
table#select-customer-results tr.clickable:hover{
background-color:#BCC2C6;
}
table#select-customer-results th{
color:#FFF;
padding:7px;
padding-top:10px;
font-weight:bold;
text-align:left;
box-shadow:0 2px 3px 0 #474747;
-webkit-box-shadow:0 2px 3px 0 #474747;
-moz-box-shadow:0 2px 3px 0 #474747;
background: #878787;
background: -moz-linear-gradient(top, #878787 0%, #6E6E6E 50%, #5C5C5C 51%, #7B7B7B 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#878787), color-stop(50%,#6E6E6E), color-stop(51%,#5C5C5C), color-stop(100%,#7B7B7B));
background: -webkit-linear-gradient(top, #878787 0%,#6E6E6E 50%,#5C5C5C 51%,#7B7B7B 100%);
background: -o-linear-gradient(top, #878787 0%,#6E6E6E 50%,#5C5C5C 51%,#7B7B7B 100%);
background: -ms-linear-gradient(top, #878787 0%,#6E6E6E 50%,#5C5C5C 51%,#7B7B7B 100%);
background: linear-gradient(to bottom, #878787 0%,#6E6E6E 50%,#5C5C5C 51%,#7B7B7B 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#878787', endColorstr='#7B7B7B',GradientType=0 );
}
这里是在jsfiddle上的示例:
http://jsfiddle.net/Q3sbp/（注意：本文为机器翻译，仅供参考。）
select-customer-results覆盖了另一个表格select-customer-results的滚动条的原因是因为第一个表格被设置为position:fixed和top:-1px。第二个表格没有给定特定的位置，并占据了整个绝对定位的父 div。我看到你正在尝试使用一个空的 div 设置为height:37px来解决这个问题。这不会起作用。请参见下面 @SidharthMudgal 的答案。 - Morrowind789