以下是对马克西米利安·希尔斯(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;
    }
});

两个div，一个用于头，一个用于数据。使数据div可滚动，并使用JavaScript将标题中的列的宽度设置为与数据中的宽度相同。我认为数据列的宽度应该是固定的，而不是动态的。

简单的jQuery插件

这是Mahes解的一个变种。你可以像这样调用它$('table#foo').scrollableTable();

这个想法是:

将head和tbody分割为单独的表元素 使它们的单元格宽度再次匹配 将第二个表包装在div.scrollable中 使用CSS使div.scrollable实际滚动

CSS可以是:

div.scrollable { height: 300px; overflow-y: scroll;}

警告

显然，拆分这些表会降低标记的语义性。我不确定这对可访问性有什么影响。 这个插件不处理页脚，多个页眉等。 我只在Chrome 20版本中测试过。

也就是说，它符合我的目的，你可以自由地使用和修改它。

下面是插件:

jQuery.fn.scrollableTable = function () {
  var $newTable, $oldTable, $scrollableDiv, originalWidths;
  $oldTable = $(this);

  // Once the tables are split, their cell widths may change. 
  // Grab these so we can make the two tables match again.
  originalWidths = $oldTable.find('tr:first td').map(function() {
    return $(this).width();
  });

  $newTable = $oldTable.clone();
  $oldTable.find('tbody').remove();
  $newTable.find('thead').remove();

  $.each([$oldTable, $newTable], function(index, $table) {
    $table.find('tr:first td').each(function(i) {
      $(this).width(originalWidths[i]);
    });
  });

  $scrollableDiv = $('<div/>').addClass('scrollable');
  $newTable.insertAfter($oldTable).wrap($scrollableDiv);
};

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

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

目前(2018-05):

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

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

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

这是我们最终使用的解决方案(为了处理一些边缘情况和旧版本的Internet Explorer，我们最终也会在滚动时淡出标题栏，然后在滚动结束时重新淡出，但在Firefox和WebKit浏览器中，这个解决方案是有效的。它假设边界崩溃:崩溃。

此解决方案的关键在于，一旦应用了边界折叠，CSS转换就可以在头部上工作，因此只需拦截滚动事件并正确设置转换即可。你不需要复制任何东西。除非在浏览器中正确地实现这种行为，否则很难想象还有更轻量级的解决方案。

JSFiddle: http://jsfiddle.net/podperson/tH9VU/2/

它被实现为一个简单的jQuery插件。你只需要调用像$('thead').sticky()这样的调用来让你的head's sticky，它们就会一直存在。它适用于一个页面上的多个表和大表中间的头部部分。

$.fn.sticky = function(){
    $(this).each( function(){
        var thead = $(this),
            tbody = thead.next('tbody');

        updateHeaderPosition();

        function updateHeaderPosition(){
            if(
                thead.offset().top < $(document).scrollTop()
                && tbody.offset().top + tbody.height() > $(document).scrollTop()
            ){
                var tr = tbody.find('tr').last(),
                    y = tr.offset().top - thead.height() < $(document).scrollTop()
                        ? tr.offset().top - thead.height() - thead.offset().top
                        : $(document).scrollTop() - thead.offset().top;

                thead.find('th').css({
                    'z-index': 100,
                    'transform': 'translateY(' + y + 'px)',
                    '-webkit-transform': 'translateY(' + y + 'px)'
                });
            } else {
                thead.find('th').css({
                    'transform': 'none',
                    '-webkit-transform': 'none'
                });
            }
        }

        // See http://www.quirksmode.org/dom/events/scroll.html
        $(window).on('scroll', updateHeaderPosition);
    });
}

$('thead').sticky();

我开发了一个简单的轻量级jQuery插件，用于将格式良好的HTML表转换为具有固定表头和列的可滚动表。

该插件可以很好地匹配固定部分与可滚动部分的像素到像素的定位。此外，您还可以冻结水平滚动时始终显示在视图中的列数。

演示和文档:http://meetselva.github.io/fixed-table-rows-cols/

GitHub存储库:https://github.com/meetselva/fixed-table-rows-cols

下面是带有固定表头的简单表的用法，

$(<table selector>).fxdHdrCol({
    width:     "100%",
    height:    200,
    colModal: [{width: 30, align: 'center'},
               {width: 70, align: 'center'}, 
               {width: 200, align: 'left'}, 
               {width: 100, align: 'center'}, 
               {width: 70, align: 'center'}, 
               {width: 250, align: 'center'}
              ]
});