到目前为止，我所见过的最好的解决方案是CSS，具有良好的跨浏览器支持，并且没有对齐问题，这是来自codingrabbithole的解决方案

table {
  width: 100%;
}
thead, tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
tbody {
  display: block;
  overflow-y: auto;
  table-layout: fixed;
  max-height: 200px;
}

所有六个左右的CSS解决方案都假设一个短表。这些代码应该用几百行的代码进行测试。

一种没有固定宽度的简单方法:

.myTable tbody{
  display:block;
  overflow:auto;
  height:200px;
  width:100%;
}
.myTable thead tr{
  display:block;
}

源

现在，在onLoad上，调整宽度，只需添加这个jquery脚本:

$.each($('.myTable tbody tr:nth(0) td'), function(k,v) {
    $('.myTable thead th:nth('+k+')').css('width', $(v).css('width'));
});

固定表头- css

简单位置:粘;上图:0;第th个元素。(Chrome, FF, Edge)

.tableFixHead { overflow: auto; height: 100px; } .tableFixHead thead th { position: sticky; top: 0; z-index: 1; } /* Just common table stuff. Really. */ table { border-collapse: collapse; width: 100%; } th, td { padding: 8px 16px; } th { background:#eee; } <div class="tableFixHead"> <table> <thead> <tr><th>TH 1</th><th>TH 2</th></tr> </thead> <tbody> <tr><td>A1</td><td>A2</td></tr> <tr><td>B1</td><td>B2</td></tr> <tr><td>C1</td><td>C2</td></tr> <tr><td>D1</td><td>D2</td></tr> <tr><td>E1</td><td>E2</td></tr> </tbody> </table> </div>

对于黏滞的垂直TH和水平TH列(在TBODY内部):

.tableFixHead          { overflow: auto; height: 100px; width: 240px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
.tableFixHead tbody th { position: sticky; left: 0; }

.tableFixHead { overflow: auto; height: 100px; width: 240px; } .tableFixHead thead th { position: sticky; top: 0; z-index: 1; } .tableFixHead tbody th { position: sticky; left: 0; } /* Just common table stuff. Really. */ table { border-collapse: collapse; width: 100%; } th, td { padding: 8px 16px; white-space: nowrap; } th { background:#eee; } <div class="tableFixHead"> <table> <thead> <tr><th></th><th>TH 1</th><th>TH 2</th></tr> </thead> <tbody> <tr><th>Foo</th><td>Some long text lorem ipsum</td><td>Dolor sit amet</td></tr> <tr><th>Bar</th><td>B1</td><td>B2</td></tr> <tr><th>Baz</th><td>C1</td><td>C2</td></tr> <tr><th>Fuz</th><td>D1</td><td>D2</td></tr> <tr><th>Zup</th><td>E1</td><td>E2</td></tr> </tbody> </table> </div>

TH边界问题修复

由于不能在平移后的TH元素上正确地绘制边界， 要重新创建和渲染“边框”，使用box-shadow属性:

/* Borders (if you need them) */
.tableFixHead,
.tableFixHead td {
  box-shadow: inset 1px -1px #000;
}
.tableFixHead th {
  box-shadow: inset 1px 1px #000, 0 1px #000;
}

.tableFixHead { overflow: auto; height: 100px; } .tableFixHead thead th { position: sticky; top: 0; z-index: 1; } /* Just common table stuff. Really. */ table { border-collapse: collapse; width: 100%; } th, td { padding: 8px 16px; } th { background:#eee; } /* Borders (if you need them) */ .tableFixHead, .tableFixHead td { box-shadow: inset 1px -1px #000; } .tableFixHead th { box-shadow: inset 1px 1px #000, 0 1px #000; } <div class="tableFixHead"> <table> <thead> <tr><th>TH 1</th><th>TH 2</th></tr> </thead> <tbody> <tr><td>A1</td><td>A2</td></tr> <tr><td>B1</td><td>B2</td></tr> <tr><td>C1</td><td>C2</td></tr> <tr><td>D1</td><td>D2</td></tr> <tr><td>E1</td><td>E2</td></tr> </tbody> </table> </div>

TH粘不工作修复

确保“th”元素的父元素，至少到表元素(包括)，没有设置溢出相关的样式(例如overflow, overflow-x, overflow-y)。

有关更多信息，请参阅stackoverflow.com/Why 'position:粘性'不工作吗?

修正表头-使用JavaScript

对于古老的浏览器，你可以使用一点JS并翻译th元素

// Fix table head example: function tableFixHead(evt) { const el = evt.currentTarget, sT = el.scrollTop; el.querySelectorAll("thead th").forEach(th => th.style.transform = `translateY(${sT}px)` ); } document.querySelectorAll(".tableFixHead").forEach(el => el.addEventListener("scroll", tableFixHead) ); .tableFixHead { overflow-y: auto; height: 100px; } /* Just common table stuff. */ table { border-collapse: collapse; width: 100%; } th, td { padding: 8px 16px; } th { background: #eee; } <div class="tableFixHead"> <table> <thead> <tr><th>TH 1</th><th>TH 2</th></tr> </thead> <tbody> <tr><td>A1</td><td>A2</td></tr> <tr><td>B1</td><td>B2</td></tr> <tr><td>C1</td><td>C2</td></tr> <tr><td>D1</td><td>D2</td></tr> <tr><td>E1</td><td>E2</td></tr> </tbody> </table> </div>

刚发现一个很酷的解决方案使用网格! 这是我用过的，效果很好:

tbody tr, thead tr {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; // or whatever division you wanna do
}

tbody {
  height: 300px; // or whatever height
  width: 100%;
  overflow-y: auto;
  display: block;
}

演示: https://codesandbox.io/s/table-with-inner-body-scroll-hggq7x

您可以放置两个div，其中第一个div(标题)将有透明的滚动条和第二个div将有数据与可见/自动滚动条。示例中有用于遍历数据的角代码片段。

下面的代码为我工作-

<div id="transparentScrollbarDiv" class="container-fluid" style="overflow-y: scroll;">
    <div class="row">
        <div class="col-lg-3 col-xs-3"><strong>{{col1}}</strong></div>
        <div class="col-lg-6 col-xs-6"><strong>{{col2}}</strong></div>
        <div class="col-lg-3 col-xs-3"><strong>{{col3}}</strong></div>
    </div>
</div>
<div class="container-fluid" style="height: 150px; overflow-y: auto">
    <div>
        <div class="row" ng-repeat="row in rows">
            <div class="col-lg-3 col-xs-3">{{row.col1}}</div>
            <div class="col-lg-6 col-xs-6">{{row.col2}}</div>
            <div class="col-lg-3 col-xs-3">{{row.col3}}</div>
        </div>
    </div>
</div>

隐藏标题滚动条的附加样式

<style>
        #transparentScrollbarDiv::-webkit-scrollbar {
            width: inherit;
        }

        /* this targets the default scrollbar (compulsory) */

        #transparentScrollbarDiv::-webkit-scrollbar-track {
            background-color: transparent;
        }

        /* the new scrollbar will have a flat appearance with the set background color */

        #transparentScrollbarDiv::-webkit-scrollbar-thumb {
            background-color: transparent;
        }

        /* this will style the thumb, ignoring the track */

        #transparentScrollbarDiv::-webkit-scrollbar-button {
            background-color: transparent;
        }

        /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

        #transparentScrollbarDiv::-webkit-scrollbar-corner {
            background-color: transparent;
        }

        /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
    </style>