页面滚动时如何让Bootstrap 4表格表头固定顶部，sticky-top不生效怎么解决？

核心失效原因 #

• 大多数主流浏览器对<thead>、<tr>这类表格组元素设置position: sticky的原生支持度很差，sticky定位仅能稳定作用在<th>、<td>这类单元格元素上
• Bootstrap自带的sticky-top类仅设置了position: sticky; top: 0，但没有适配表格表头的背景、层级属性，滚动时会出现内容穿透、层级低于表格内容的问题
• Argon Dashboard的表格默认会包裹在.table-responsive或.card-body容器中，部分版本的这类容器默认设置了overflow-x: auto，如果你的sticky是要相对于整个页面滚动固定，父级的overflow属性会导致sticky定位的参照容器变为该父容器而非视口，直接失效

可行解决方案 #

方案1：直接给表头单元格设置sticky（适配性最高） #

1. 移除<thead>上的sticky-top类，添加如下自定义CSS：

.thead-light th {
  position: sticky;
  /* 如果页面顶部有固定导航栏，将0改为导航栏的实际高度，比如72px */
  top: 0;
  /* 对应thead-light的默认背景色，避免滚动时表格内容穿透 */
  background-color: #e9ecef;
  /* 层级高于表格内容，低于页面固定导航即可 */
  z-index: 10;
}

2. 无需修改原有HTML结构，刷新页面即可生效。

方案2：适配容器滚动场景 #

如果你需要表头相对于表格所在的父容器滚动固定（而非整个页面），给包裹表格的.table-responsive容器设置固定高度同时保留overflow属性即可：

.table-responsive {
  /* 按需求设置容器最大高度 */
  max-height: 600px;
  overflow-y: auto;
}
/* 同时保留方案1的th样式即可 */

内容的提问来源于stack exchange，提问作者Toksti Dats Ready