Bootstrap 4响应式表格开发需求：横向滚动时固定首列

Hey，针对你用Bootstrap 4开发日程表时，需要实现横向滚动固定首列的需求，我有一套亲测有效的方案，刚好适配你说的“时段列固定、方便查看对应事件”的场景：

核心思路 #

利用CSS的position: sticky属性，结合Bootstrap的表格结构，自定义样式让首列（时段列）在横向滚动时保持固定，无需依赖额外插件。

1. 搭建HTML结构 #

先把表格放在Bootstrap的table-responsive容器里（保证横向滚动），同时给首列的表头和单元格都加上专属类名sticky-column：

<div class="table-responsive">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th class="sticky-column">时段</th>
        <th>周一</th>
        <th>周二</th>
        <th>周三</th>
        <th>周四</th>
        <th>周五</th>
        <!-- 可根据需求添加更多日期列 -->
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="sticky-column">09:00-10:00</td>
        <td>产品需求评审</td>
        <td>前端开发同步</td>
        <td>客户视频会议</td>
        <td>UI原型确认</td>
        <td>团队周会</td>
      </tr>
      <tr>
        <td class="sticky-column">10:00-11:00</td>
        <td>代码编写</td>
        <td>接口联调</td>
        <td>文档整理</td>
        <td>Bug修复</td>
        <td>需求复盘</td>
      </tr>
      <!-- 更多时段行 -->
    </tbody>
  </table>
</div>

2. 添加自定义CSS样式 #

这是实现固定的关键，需要设置sticky定位，同时处理背景色和边框，避免滚动时内容重叠：

/* 确保滚动容器的基础行为 */
.table-responsive {
  overflow-x: auto;
  position: relative;
}

/* 首列固定核心样式 */
.sticky-column {
  position: sticky;
  left: 0;
  z-index: 10;
  /* 设置白色背景，防止后面的内容透过显示 */
  background-color: #ffffff;
  /* 右边加边框，和其他列区分开 */
  border-right: 2px solid #dee2e6;
}

/* 表头首列额外固定在顶部（如果表格有纵向滚动时更友好） */
thead .sticky-column {
  top: 0;
}

3. 关键注意事项 #

• 必须给首列设置背景色，否则横向滚动时后面的表格内容会透过首列显示出来
• 如果你的表格有纵向滚动需求，thead .sticky-column的top: 0可以让表头首列也固定在顶部，提升体验
• 调整首列的宽度（比如加width: 120px），避免内容换行导致显示混乱
• 不要给表格设置overflow-x: hidden，否则会覆盖table-responsive的滚动效果

4. 效果验证 #

把上面的代码整合到你的项目中，横向滚动表格时，左侧的时段列会固定不动，用户可以清晰地查看每个时段对应的所有日期事件，完全符合你的需求！

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