如果不重新实现.table-responsive，就无法在.table-responsive中共存position: sticky。
我的解决方案最终使用.table-responsive-sm来拒绝这种折衷，因为响应表肯定是不需要的。

在这种情况下，你需要自己编写代码，下面的JS就可以完成这个工作：

var element = document.getElementById("fixed-thead");
var parentElement = element.parentElement;
window.addEventListener('scroll', () => {
    var coordinates = parentElement.getBoundingClientRect();
    if (coordinates.y < 0) {
        element.style.transform = 'translate3d(0, ' + (-coordinates.y) + 'px, 0)';
    } else {
        element.style.transform = 'translate3d(0,0,0)';
    }
});

在表格中将thead标记为id="fixed-thead"，如下所示：

<thead id="fixed-thead">

我使用translate3d来启用硬件加速，使其更流畅。如果用户使用滚轮滚动滚动事件触发非常频繁，我建议使用滚动事件的去抖动。
如果您的表中有固定长度的列，您可以使用设置position: fixed和top: 0来代替translate3d。但如果是可变长度，则首选translate3d。

不需要任何额外的CSS，你可以通过从div中删除table-responsive并在table标签中添加class=“bg-white sticky-top border-bottom”类来修复表头。

<div class="table">
  <table class="table">
   <thead>
    <tr>
     <th class="bg-white sticky-top border-bottom">FirstName</th>
     <th class="bg-white sticky-top border-bottom">LastName</th>
     <th class="bg-white sticky-top border-bottom">Class</th>
    </tr>
   </thead>
   <tbody>
     <tr>
       <td>John</td>
       <td>Cooker</td>
       <td>A1</td>
     </tr>
     <tr>
       <td>David</td>
       <td>Jeferson</td>
       <td>A2</td>
     </tr>
     ...
  </table>
</div>