如何在Bootstrap 3.3.7中固定表格左侧列？

我懂你这种头疼——直接给表格列加position: fixed确实容易把Bootstrap 3.3.7的表格布局搞崩，要么列宽对齐乱了，要么滚动时表头和内容错位。针对这个需求，我给你一套经过验证的解决方案，能完美固定左侧的日期列及对应表头：

核心思路 #

把需要固定的左侧列（表头+数据）和可滚动的右侧内容拆成两个独立的表格，通过Flex布局和样式对齐模拟原表格的视觉效果，同时避开直接固定列带来的布局脱离问题。

第一步：调整HTML结构 #

将原表格拆分为「固定列容器」和「滚动列容器」，保证两个表格的行数量完全对应：

<div class="table-container">
  <!-- 固定左侧列（日期+对应表头） -->
  <div class="fixed-column">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>日期</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>2024-01-01</td></tr>
        <tr><td>2024-01-02</td></tr>
        <tr><td>2024-01-03</td></tr>
        <!-- 更多数据行... -->
      </tbody>
    </table>
  </div>

  <!-- 可滚动的右侧内容列 -->
  <div class="scrollable-column">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>列1</th>
          <th>列2</th>
          <th>列3</th>
          <th>列4</th>
          <!-- 更多非固定列... -->
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>内容1-1</td>
          <td>内容1-2</td>
          <td>内容1-3</td>
          <td>内容1-4</td>
        </tr>
        <tr>
          <td>内容2-1</td>
          <td>内容2-2</td>
          <td>内容2-3</td>
          <td>内容2-4</td>
        </tr>
        <!-- 对应数量的数据行... -->
      </tbody>
    </table>
  </div>
</div>

第二步：添加关键CSS样式 #

通过样式保证两个表格的对齐度、固定列的定位以及滚动效果：

/* 容器用Flex布局，让固定列和滚动列并排 */
.table-container {
  display: flex;
  overflow: hidden;
  margin: 1rem;
}

/* 固定列的样式 */
.fixed-column {
  position: relative;
  width: 150px; /* 自定义固定列宽度，按需调整 */
  border-right: 2px solid #ddd; /* 加边框区分固定列和滚动列 */
}

/* 滚动列的样式 */
.scrollable-column {
  flex: 1;
  overflow-x: auto;
}

/* 统一两个表格的基础样式，避免错位 */
.fixed-column .table,
.scrollable-column .table {
  margin-bottom: 0;
}

.fixed-column th,
.fixed-column td,
.scrollable-column th,
.scrollable-column td {
  padding: 8px;
  white-space: nowrap; /* 禁止内容换行，保证行高一致 */
}

/* 固定表头，避免滚动时表头跟随内容移动 */
.fixed-column thead th,
.scrollable-column thead th {
  position: sticky;
  top: 0;
  background-color: #f5f5f5; /* 匹配Bootstrap默认表头背景色 */
  z-index: 10;
}

第三步：可选JS同步行高（解决动态内容错位） #

如果表格行高因内容长度变化不一致，用JS同步两个表格的行高：

$(document).ready(function() {
  // 同步固定列和滚动列的行高
  function syncRowHeights() {
    $('.fixed-column tbody tr').each(function(index) {
      var targetHeight = $(this).height();
      $('.scrollable-column tbody tr').eq(index).height(targetHeight);
    });
  }

  // 页面加载和窗口 resize 时都同步一次
  syncRowHeights();
  $(window).resize(syncRowHeights);
});

额外优化：响应式适配 #

在小屏幕下取消固定列，让整个表格横向滚动，提升移动端体验：

@media (max-width: 768px) {
  .table-container {
    flex-direction: column;
  }
  .fixed-column {
    width: 100%;
    border-right: none;
    border-bottom: 2px solid #ddd;
  }
}

这个方案的好处是完全贴合Bootstrap 3的样式体系，不会破坏原有表格的视觉风格，同时完美实现左侧列固定的需求。

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