博士TL;

如果您的目标是现代浏览器，并且没有奢侈的样式需求:http://jsfiddle.net/dPixie/byB9d/3/…虽然四大版本是相当甜蜜的以及这个版本处理流体宽度好得多。

大家好!

随着HTML5和CSS3的进步，至少对于现代浏览器来说，这是可能的。我提出的稍微有点粗糙的实现可以在这里找到:http://jsfiddle.net/dPixie/byB9d/3/。我已经在FX 25, Chrome 31和IE 10上测试过了…

相关的HTML(在你的文档顶部插入一个HTML5文档类型):

html, body { margin: 0; padding: 0; height: 100%; } section { position: relative; border: 1px solid #000; padding-top: 37px; background: #500; } section.positioned { position: absolute; top: 100px; left: 100px; width: 800px; box-shadow: 0 0 15px #333; } .container { overflow-y: auto; height: 200px; } table { border-spacing: 0; width: 100%; } td+td { border-left: 1px solid #eee; } td, th { border-bottom: 1px solid #eee; background: #ddd; color: #000; padding: 10px 25px; } th { height: 0; line-height: 0; padding-top: 0; padding-bottom: 0; color: transparent; border: none; white-space: nowrap; } th div { position: absolute; background: transparent; color: #fff; padding: 9px 25px; top: 0; margin-left: -25px; line-height: normal; border-left: 1px solid #800; } th:first-child div { border: none; } <section class="positioned"> <div class="container"> <table> <thead> <tr class="header"> <th> Table attribute name <div>Table attribute name</div> </th> <th> Value <div>Value</div> </th> <th> Description <div>Description</div> </th> </tr> </thead> <tbody> <tr> <td>align</td> <td>left, center, right</td> <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td> </tr> <tr> <td>bgcolor</td> <td>rgb(x,x,x), #xxxxxx, colorname</td> <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td> </tr> <tr> <td>border</td> <td>1,""</td> <td>Specifies whether the table cells should have borders or not</td> </tr> <tr> <td>cellpadding</td> <td>pixels</td> <td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td> </tr> <tr> <td>cellspacing</td> <td>pixels</td> <td>Not supported in HTML5. Specifies the space between cells</td> </tr> <tr> <td>frame</td> <td>void, above, below, hsides, lhs, rhs, vsides, box, border</td> <td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td> </tr> <tr> <td>rules</td> <td>none, groups, rows, cols, all</td> <td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td> </tr> <tr> <td>summary</td> <td>text</td> <td>Not supported in HTML5. Specifies a summary of the content of a table</td> </tr> <tr> <td>width</td> <td>pixels, %</td> <td>Not supported in HTML5. Specifies the width of a table</td> </tr> </tbody> </table> </div> </section>

但是如何? !

简单地说，你有一个表头，你通过使它高0px来隐藏它，它还包含了用作固定表头的div。表的容器在顶部留下了足够的空间来允许绝对定位的标题，并且带有滚动条的表如您所期望的那样出现。

上面的代码使用了定位类来确定表的位置(我在弹出式对话框中使用它)，但是您也可以通过从容器中删除定位类来在文档流中使用它。

但是…

它并不完美。Firefox拒绝使标题行为0px(至少我没有找到任何方法)，但固执地保持它至少为4px…这不是一个大问题，但取决于你的样式，它会混淆你的边界等。

该表还使用了一种伪列方法，其中容器本身的背景色被用作标题div的背景，这是透明的。

总结

总而言之，根据您的需求，可能会有样式问题，特别是边界或复杂的背景。可计算性可能也有问题，我还没有在各种各样的浏览器中检查它(如果你尝试过，请评论你的经验)，但我没有发现任何类似的东西，所以我认为无论如何都值得发布…

所有从CSS规范之外解决这个问题的尝试都是我们真正想要的:按照THEAD的隐含承诺交付。

这个冻结表头的问题长期以来一直是HTML/CSS中的一个开放性问题。

在理想的情况下，应该有一个纯css解决方案来解决这个问题。不幸的是，似乎没有一个合适的。

相关标准-关于此主题的讨论包括:

粘性定位提案网址:http://lists.w3.org/Archives/Public/www-style/2012Jun/0627.html 请在阿特金斯提出的“位置-根”、“位置-包含”或“位置-限制”的建议中打上标签:http://www.xanthir.com/blog/b48H0

更新:Firefox的发货位置:粘在版本32。每个人都会赢!

我希望我能早点找到@Mark的解决方案，但在我看到这个SO问题之前，我自己写了一个……

我的是一个非常轻量级的jQuery插件，它支持固定的页眉、页脚、列跨越(colspan)、调整大小、水平滚动，以及滚动开始前可选的显示行数。

jQuery。scrollTableBody (GitHub)

只要你有一个合适的<thead>， <tbody>，和(可选)<tfoot>的表，你所需要做的就是:

$('table').scrollTableBody();

以下是对马克西米利安·希尔斯(Maximilian Hils)发布的答案的改进。

这个在ie11中没有任何闪烁:

var headerCells = tableWrap.querySelectorAll("thead td");
for (var i = 0; i < headerCells.length; i++) {
    var headerCell = headerCells[i];
    headerCell.style.backgroundColor = "silver";
}
var lastSTop = tableWrap.scrollTop;
tableWrap.addEventListener("scroll", function () {
    var stop = this.scrollTop;
    if (stop < lastSTop) {
        // Resetting the transform for the scrolling up to hide the headers
        for (var i = 0; i < headerCells.length; i++) {
            headerCells[i].style.transitionDelay = "0s";
            headerCells[i].style.transform = "";
        }
    }
    lastSTop = stop;
    var translate = "translate(0," + stop + "px)";
    for (var i = 0; i < headerCells.length; i++) {
        headerCells[i].style.transitionDelay = "0.25s";
        headerCells[i].style.transform = translate;
    }
});

使用最新版本的jQuery，并包含以下JavaScript代码。

$(window).scroll(function(){
  $("id of the div element").offset({top:$(window).scrollTop()});
});

我还创建了一个插件来解决这个问题。我的项目- jQuery。floatThead已经存在了4年多，非常成熟。

它不需要外部样式，也不期望您的表以任何特定的方式进行样式化。支持Internet Explorer9+和Firefox/Chrome浏览器。

目前(2018-05):

在GitHub上有405次提交和998个星级

这里的许多(不是全部)答案都是快速的技巧，可能解决了某个人的问题，但并不适用于每一张桌子。

其他一些插件已经很老了，可能在ie浏览器上运行得很好，但在Firefox和Chrome浏览器上就不行了。