如何在Bootstrap中用CSS实现多个表头粘性固定效果

你的代码存在两个核心问题导致粘性表头失效：

1. CSS语法错误：.sticky类中top: 0 px的写法有误，数值和单位之间不能有空格，正确格式应为top: 0px或直接top: 0，空格会使属性值失效。
2. 双表头重叠冲突：两个表头都使用sticky-top时，默认的top: 0会让第二个表头被第一个完全覆盖，需要为第二个表头设置大于第一个表头高度的top值，使其固定在第一个表头下方。

修正后的完整代码 #

CSS 部分

/* 第一个表头的粘性样式，也可直接用Bootstrap自带的sticky-top类 */
.sticky-top {
  position: sticky;
  top: 0;
  z-index: 1020; /* 确保表头始终在内容上方 */
}

/* 第二个表头固定在第一个表头下方，高度值可根据实际表头高度调整 */
.sticky-top-second {
  position: sticky;
  top: 56px;
  z-index: 1010;
}

HTML 部分

替换第二个表头的无效类名，确保背景色覆盖下方内容：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<div class="container">
  <div class="row sticky-top bg-white">
    <div class="col-md-1">HEADER</div>
    <div class="col-md-11">HEADER</div>
  </div><!-- row -->

  <div class="row sticky-top-second bg-white">
    <div class="col-md-1">HEADER2</div>
    <div class="col-md-11">HEADER2</div>
  </div><!-- row -->
  <!-- 下方数据行保持原结构不变 -->
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <!-- 更多数据行... -->
</div>

补充提示 #

• 如果第一个表头高度不固定，可通过JavaScript动态计算高度后设置第二个表头的top值，或结合CSS变量实现自适应。
• 确保外层.container未设置overflow: hidden或overflow: auto，这类属性会破坏粘性定位的生效逻辑。

内容的提问来源于stack exchange，提问作者Gauravsa