<style>

thead, tbody
{
    display: block;
}

tbody 
{
   overflow: auto;
   height: 100px;
}

th,td
{
    width: 120px;
}

</style>

<table class="table table-bordered table-striped">
    <thead style="background-color:lightgreen">
        <tr>
            <th>Id</th><th>Name</th><th>Roll</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
    </tbody>
</table>

以下是有效的解决方案:

table { width: 100%; } thead, tbody, tr, td, th { display: block; } tr:after { content: ' '; display: block; visibility: hidden; clear: both; } thead th { height: 30px; /*text-align: left;*/ } tbody { height: 120px; overflow-y: auto; } thead { /* fallback */ } tbody td, thead th { width: 19.2%; float: left; } <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/> <table class="table table-striped"> <thead> <tr> <th>Make</th> <th>Model</th> <th>Color</th> <th>Year</th> </tr> </thead> <tbody> <tr> <td class="filterable-cell">Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> <tr> <td class="filterable-cell">Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> <tr> <td class="filterable-cell">Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> <tr> <td class="filterable-cell">Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> </tbody> </table>

链接到jsfiddle

table { overflow-y: auto; height: 50vh; /* !!! HEIGHT MUST BE IN [ vh ] !!! */ } thead th { background-color: white; position: sticky; top: 0; } <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> <tr><td>F1</td><td>F2</td></tr> <tr><td>G1</td><td>G2</td></tr> <tr><td>H1</td><td>H2</td></tr> <tr><td>I1</td><td>I2</td></tr> <tr><td>J1</td><td>J2</td></tr> <tr><td>K1</td><td>K2</td></tr> <tr><td>L1</td><td>L2</td></tr> <tr><td>M1</td><td>M2</td></tr> <tr><td>N1</td><td>N2</td></tr> <tr><td>O1</td><td>O2</td></tr> <tr><td>P1</td><td>P2</td></tr> <tr><td>Q1</td><td>Q2</td></tr> <tr><td>R1</td><td>R2</td></tr> <tr><td>S1</td><td>S2</td></tr> <tr><td>T1</td><td>T2</td></tr> <tr><td>U1</td><td>U2</td></tr> <tr><td>V1</td><td>V2</td></tr> <tr><td>W1</td><td>W2</td></tr> <tr><td>X1</td><td>X2</td></tr> <tr><td>Y1</td><td>Y2</td></tr> <tr><td>Z1</td><td>Z2</td></tr> </tbody> </table>

你不需要js。重要的是设置表格高度[vh]

我使用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');
        }
    });
});

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

到目前为止，我所见过的最好的解决方案是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解决方案都假设一个短表。这些代码应该用几百行的代码进行测试。