不需要用div包装它…

CSS:

tr {
width: 100%;
display: inline-table;
table-layout: fixed;
}

table{
 height:300px;              // <-- Select the height of the table
 display: block;
}
tbody{
  overflow-y: scroll;      
  height: 200px;            //  <-- Select the height of the body
  width: 100%;
  position: absolute;
}

Bootply: https://www.codeply.com/p/nkaQFc713a

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

.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'));
});

既然“所有”浏览器都支持ES6，我已经将上面的各种建议合并到一个JavaScript类中，该类以表作为参数，并使主体可滚动。它让浏览器的布局引擎确定标题和主体单元格的宽度，然后使列的宽度相互匹配。

可以显式地设置表的高度，或者填充浏览器窗口的剩余部分，并提供事件的回调，如视口调整大小和/或细节元素打开或关闭。

多行标头支持是可用的，如果表使用WCAC指南中指定的id/headers属性作为可访问性，这是特别有效的，这并不像看起来那样是一个繁重的要求。

代码不依赖于任何库，但如果使用它们，则可以很好地使用它们。(在使用JQuery的页面上测试)。

代码和示例用法可以在Github上找到。

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

我使用floatThead jQuery插件(https://mkoryak.github.io/floatThead/#intro)

文档说它适用于Bootstrap 3表，我可以说它也适用于Bootstrap 4表，有或没有表响应帮助。

使用插件就像这样简单:

HTML(普通引导表标记)

<div class="table-responsive">
   <table id="myTable" class="table table-striped">
        <thead>...</thead>
        <tbody>...</tbody>
   </table>
</div>

插件初始化:

$(document).ready(function() {
    var tbl=$('#myTable');
    tbl.floatThead({
        responsiveContainer: function(tbl) {
            return tbl.closest('.table-responsive');
        }
    });
});

完整的免责声明: 我没有以任何方式与插件相关联。在尝试了这里和其他地方发布的许多其他解决方案后，我碰巧发现了它。

首先为引导表添加一些标记。在这里，我创建了一个条纹表，但也添加了一个自定义表类.table-scroll，它添加了垂直滚动条到表，并使表头固定，而向下滚动。

<div class="col-xs-8 col-xs-offset-2 well">
    <table class="table table-scroll table-striped">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>County</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Andrew</td>
                <td>Jackson</td>
                <td>Washington</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Thomas</td>
                <td>Marion</td>
                <td>Jackson</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Benjamin</td>
                <td>Warren</td>
                <td>Lincoln</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Grant</td>
                <td>Wayne</td>
                <td>Union</td>
            </tr>
            <tr>
                <td>5</td>
                <td>John</td>
                <td>Adams</td>
                <td>Marshall</td>
            </tr>
            <tr>
                <td>6</td>
                <td>Morgan</td>
                <td>Lee</td>
                <td>Lake</td>
            </tr>
            <tr>
                <td>7</td>
                <td>John</td>
                <td>Henry</td>
                <td>Brown</td>
            </tr>
            <tr>
                <td>8</td>
                <td>William</td>
                <td>Jacob</td>
                <td>Orange</td>
            </tr>
            <tr>
                <td>9</td>
                <td>Kelly</td>
                <td>Davidson</td>
                <td>Taylor</td>
            </tr>
            <tr>
                <td>10</td>
                <td>Colleen</td>
                <td>Hurst</td>
                <td>Randolph</td>
            </tr>
            <tr>
                <td>11</td>
                <td>Rhona</td>
                <td>Herrod</td>
                <td>Cumberland</td>
            </tr>
            <tr>
                <td>12</td>
                <td>Jane</td>
                <td>Paul</td>
                <td>Marshall</td>
            </tr>
            <tr>
                <td>13</td>
                <td>Ashton</td>
                <td>Fox</td>
                <td>Calhoun</td>
            </tr>
            <tr>
                <td>14</td>
                <td>Garrett</td>
                <td>John</td>
                <td>Madison</td>
            </tr>
            <tr>
                <td>15</td>
                <td>Fredie</td>
                <td>Winters</td>
                <td>Washington</td>
            </tr>
        </tbody>
    </table>
</div>

css

.table-scroll tbody {
    position: absolute;
    overflow-y: scroll;
    height: 250px;
}

.table-scroll tr {
    width: 100%;
    table-layout: fixed;
    display: inline-table;
}

.table-scroll thead > tr > th {
    border: none;
}