我刚刚完成了一个jQuery插件，将采取有效的单一表使用有效的HTML(必须有一个标题和tbody)，并将输出一个表，有固定的标题，可选的固定页脚，可以是一个克隆的标题或任何你选择的内容(分页等)。如果你想利用更大的显示器，它也会在浏览器调整大小时调整表的大小。另一个添加的特性是，如果表列不能全部放入视图，则可以侧滚动。

http://fixedheadertable.com/

在github: http://markmalek.github.com/Fixed-Header-Table/

它非常容易安装，你可以为它创建自己的自定义样式。它还在所有浏览器中使用圆角。请记住，我刚刚发布了它，所以它在技术上仍然是测试版，有一些小问题我正在解决。

它适用于Internet Explorer 7、Internet Explorer 8、Safari、Firefox和Chrome浏览器。

CSS属性position: sticky在大多数现代浏览器中都有很好的支持(我在使用Edge时遇到了问题，见下文)。

这让我们很容易解决固定头文件的问题:

thead th { position: sticky; top: 0; }

Safari需要一个供应商前缀:-webkit-sticky。

对于Firefox，我必须在父元素中添加min-height: 0到1。我忘了为什么要这么做了。

最不幸的是，微软Edge的实现似乎只是半工作。至少，在我的测试中有一些闪烁和不对齐的表单元格。这张桌子仍然可用，但在美学上存在重大问题。

以下是对马克西米利安·希尔斯(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将标题中的列的宽度设置为与数据中的宽度相同。我认为数据列的宽度应该是固定的，而不是动态的。

对于那些尝试了Maximilian Hils给出的很好的解决方案，但没有成功地让它在Internet Explorer上工作的人，我遇到了同样的问题(Internet Explorer 11)，并找到了问题所在。

在Internet Explorer 11中，样式转换(至少使用translate)在<THEAD>上不起作用。我通过将样式应用到循环中的所有<TH>来解决这个问题。这工作。我的JavaScript代码是这样的:

document.getElementById('pnlGridWrap').addEventListener("scroll", function () {
  var translate = "translate(0," + this.scrollTop + "px)";
  var myElements = this.querySelectorAll("th");
  for (var i = 0; i < myElements.length; i++) {
    myElements[i].style.transform=translate;
  }
});

在我的例子中，表格是ASP.NET中的GridView。起初我认为这是因为它没有<THEAD>，但即使我强迫它有一个，它也不工作。然后我发现了我上面写的东西。

这是一个非常好的简单的解决方案。在Chrome浏览器上它是完美的，在Firefox上有点不稳定，在ie浏览器上就更不稳定了。但总的来说，这是个好办法。

支持固定页脚

我扩展了内森的功能，也支持一个固定的页脚和最大高度。 此外，该函数将设置CSS本身，您只需要支持宽度。

用法:

固定高度:

$('table').scrollableTable({ height: 100 });

最大高度(如果浏览器支持CSS 'max-height'选项):

$('table').scrollableTable({ maxHeight: 100 });

脚本:

jQuery.fn.scrollableTable = function(options) {

    var $originalTable, $headTable, $bodyTable, $footTable, $scrollableDiv, originalWidths;

    // Prepare the separate parts of the table
    $originalTable = $(this);
    $headTable = $originalTable.clone();

    $headTable.find('tbody').remove();
    $headTable.find('tfoot').remove();

    $bodyTable = $originalTable.clone();
    $bodyTable.find('thead').remove();
    $bodyTable.find('tfoot').remove();

    $footTable = $originalTable.clone();
    $footTable.find('thead').remove();
    $footTable.find('tbody').remove();

    // Grab the original column widths and set them in the separate tables
    originalWidths = $originalTable.find('tr:first td').map(function() {
        return $(this).width();
    });

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

    // The div that makes the body table scroll
    $scrollableDiv = $('<div/>').css({
        'overflow-y': 'scroll'
    });

    if(options.height) {
        $scrollableDiv.css({'height': options.height});
    }
    else if(options.maxHeight) {
        $scrollableDiv.css({'max-height': options.maxHeight});
    }

    // Add the new separate tables and remove the original one
    $headTable.insertAfter($originalTable);
    $bodyTable.insertAfter($headTable);
    $footTable.insertAfter($bodyTable);
    $bodyTable.wrap($scrollableDiv);
    $originalTable.remove();
};