css - 带有固定标题的 CSS 可滚动表格，但使用浏览器滚动条，不会溢出

Question

这就是我所做的。http://jsfiddle.net/FeHdS/5/

如您所见，当您使用浏览器滚动条时，整个表格位于“mainwrapper”div 后面。我想让我的表有一个固定的标题，我不想使用溢出滚动。

我尝试的是简单地为thead分配一个固定位置。

thead{
    position: fixed;
}

但是随后，表格的第一行占据了标题的位置。

有没有办法只用 CSS 做到这一点？如果没有，最好的解决方案是什么？

Answer 1

您可以使用带有 javascript 的 CSS 来执行此操作。

基本上，您使用 CSS 来定位表格和表格标题行，并让表格表现得像 div。然后使用 javascript 来操作表格标题行的 CSS 定位和一个“掩码”div，在表格滚动时隐藏常规表格行。因为您的表格现在认为它是 div 并调整单元格的大小而不匹配它们的宽度，您还需要使用 CSS 设置宽度，以便表格标题宽度与 td 宽度匹配。

相关组件是：

<!-- divs with IDs are manipulated with javascript -->
<div class="fixedTableHolder">

  <div class="maskHolder">
     <div id="mask" class="mask">&nbsp;</mask>
  </div>

  <div class="fixedTable">
    <div id="theTable" class="theTable">

       <!-- here is the table, header row must have an ID -->
       <table border="0" cellspacing="5" cellpadding="5"> 
          <tr id="thFixed" class="thFixed"> 
            <td class="col1">Header cell 1</td> 
          </tr>
          <tr>
            <td class="col1">regular cell</td>
          </tr>
       </table>

    </div>
  </div>

</div>

它相当复杂，需要一两分钟以上的时间来实现。我是为一个我打算经常重复使用它的应用程序做的。这是 jsFiddle 中的演示（包含 CSS 和 javascript 以及 html）：http: //jsfiddle.net/deborah/Msvvr/