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

【问题标题】：CSS scrollable table with fixed header, but using the browser scrollbar, not overflow带有固定标题的 CSS 可滚动表格，但使用浏览器滚动条，不会溢出
【发布时间】：2016-11-28 07:23:05
【问题描述】：

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

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

我尝试的是简单地将固定位置分配给头。

thead{
    position: fixed;
}

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

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

【问题讨论】：

标签： css scrollbar css-tables

【解决方案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/

【讨论】：

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