Question

我的页面包含一个包含大型数据表的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>

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/

Answer 1

我在代码中注意到了一些问题。首先，它不是semantic。 th标记的重点在于它是机器可读的，但是您已经拆分了表，以便th用于没有内容的表，以及包含内容的表没有头。另一个问题是，您对两个表使用相同的id。 id属性应该唯一地定义元素。如果你想对两个表应用相同的样式，你应该给它们一个类。

除了这些，我们来看一些解决方案。我的第一个想法是在th表上设置一个负余量，使其出现在div之外（确切地说，在它之上）。但是，这不起作用，因为div的整个要点是将overflow-y设置为scroll。因此，您应该做的是将表的代码移到div之外。

这就是它的样子，on JSFiddle。

我稍微更改了代码。我摆脱了那里奇怪的height: 35px div，也取消了绝对定位。绝对的位置并不难以排列。

Answer 2

您需要在标头表上取消position:fixed。此外，您还需要删除<div style='height:37px;'></div>，因为它会在标题后添加不必要的空格。这是the updated fiddle。

Answer 3

为什么你桌上需要position: fixed？看看这篇文章，似乎它几乎解释了你想要做的事情。 http://imar.spaanjaars.com/357/a-scrollable-table-with-a-fixed-header

100％宽度的固定DIV覆盖滚动条

HTML

CSS

以下是jsfiddle的示例：

3 个答案: