CSS可滚动表格，具有固定标题，但使用浏览器滚动条，不溢出

这就是我所做的

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

我试着简单地给thead分配一个固定的位置

thead{
    position: fixed;
}

但是，表的第一行将取代标题

---

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

您可以使用CSS和javascript来实现这一点

基本上，您可以使用CSS定位表和表标题行，并使表的行为类似于div。然后使用javascript操纵表格标题行的CSS定位和一个“掩码”div，该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>

标题单元格1
规则细胞

---

它相当复杂，需要一两分钟才能实现。我这样做是为了一个我打算经常重复使用的应用程序。这里是JSFIDLE的一个演示（包含CSS和javascript以及html）：

我忘了提到，这在IE8中是跨浏览器兼容的（适用于IE8，但不适用于IE7）。