6

我有一个包含大数据表的 div 页面。div 具有溢出值，overflow-x:hidden;overflow-y:scroll;而不是页面滚动，您只需使用此 div 的滚动条滚动即可。但是，表格标题（thead）是固定的，并且在您滚动时停留在 div 的顶部，但它覆盖了滚动条。
我希望表格标题是带有滚动条的 div 的 100%，但我希望它像表格的其余部分一样，而不是覆盖滚动条。
我已经在 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>

​<h2>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/

4

2 回答 2

1

我注意到您的代码存在一些问题。首先，它不是语义的。标签的全部意义在于th它是机器可读的，但是您已经拆分了表格，以便您th的 s 用于没有内容的表格，而有内容的表格没有标题。另一个问题是您id对两个表都使用相同的。该id属性应该唯一地定义一个元素。如果您想将相同的样式应用于两个表，您应该给它们一个类。

除了这些，让我们看看一些解决方案。我的第一个想法是在th表格上设置一个负边距，这样它就出现在 div 之外（准确地说是在它上面）。但是，这不起作用，因为 div 的全部意义在于将其overflow-y设置为scroll. 因此，您应该做的是将表格的代码移到 div 之外。

这是在 JSFiddle 上的样子。

我把代码改了一点。我去掉了height: 35px那里奇怪的div，也去掉了绝对定位。绝对定位两者以使它们对齐并不难。

于 2012-10-08T21:07:12.910 回答
0

position:fixed你需要在他的标题表上起飞。此外，您还需要删除<div style='height:37px;'></div>，因为它在标题后添加了不必要的空间。这是更新的小提琴。

于 2012-10-08T21:06:41.787 回答