Bootstrap多列表格固定表头求助：纯HTML/CSS实现（Angular5环境）

我之前在项目里遇到过一模一样的问题——多列Bootstrap表格要同时支持水平、垂直滚动，还要固定表头，纯HTML/CSS就能搞定，不需要任何JS库或者脚本，刚好适配你的Angular5场景，下面是具体方案：

核心思路 #

把表格拆成独立的表头容器和表体容器，分别控制滚动行为，同时通过固定列宽保证表头和表体的列完全对齐，避免错位。

实现代码 #

HTML结构（Angular5可直接用*ngFor循环生成列）

<div class="fixed-header-table">
  <!-- 表头区域：仅水平滚动 -->
  <div class="table-header-wrapper">
    <table class="table table-bordered">
      <thead>
        <tr>
          <!-- 给每一列设置固定宽度，表头和表体要完全一致 -->
          <th style="width: 100px;">用户ID</th>
          <th style="width: 150px;">用户名</th>
          <th style="width: 200px;">邮箱地址</th>
          <th style="width: 120px;">注册时间</th>
          <th style="width: 100px;">状态</th>
          <!-- 继续添加剩下的10+列，每列都设置固定width -->
          <th style="width: 130px;">操作1</th>
          <th style="width: 130px;">操作2</th>
          <!-- ... 更多列 -->
        </tr>
      </thead>
    </table>
  </div>

  <!-- 表体区域：支持垂直+水平滚动 -->
  <div class="table-body-wrapper">
    <table class="table table-bordered">
      <tbody>
        <!-- Angular5里用*ngFor循环数据行 -->
        <tr *ngFor="let item of tableData">
          <td style="width: 100px;">{{item.id}}</td>
          <td style="width: 150px;">{{item.name}}</td>
          <td style="width: 200px;">{{item.email}}</td>
          <td style="width: 120px;">{{item.registerTime}}</td>
          <td style="width: 100px;">{{item.status}}</td>
          <td style="width: 130px;">编辑</td>
          <td style="width: 130px;">删除</td>
          <!-- ... 对应表头的列 -->
        </tr>
      </tbody>
    </table>
  </div>
</div>

CSS样式

.fixed-header-table {
  max-width: 100%;
  width: 100%;
}

/* 表头容器：仅允许水平滚动，去掉底部边框避免和表体重叠 */
.table-header-wrapper {
  overflow-x: auto;
  border-bottom: none;
}

/* 表体容器：设置最大高度触发垂直滚动，同时支持水平滚动 */
.table-body-wrapper {
  overflow: auto;
  max-height: 450px; /* 根据你的需求调整高度 */
}

/* 去掉表格默认margin，避免表头和表体之间出现间隙 */
.table-header-wrapper .table,
.table-body-wrapper .table {
  margin-bottom: 0;
  width: 100%;
}

/* 强制列内内容不换行，保证列宽稳定 */
.table-header-wrapper th,
.table-body-wrapper td {
  white-space: nowrap;
}

关键注意事项 #

1. 必须固定列宽：这是表头和表体对齐的核心，如果你不想手动写width，可以在Angular组件里定义一个列配置数组，比如columnConfigs = [{label: '用户ID', width: '100px'}, ...]，然后通过*ngFor循环绑定style.width，这样更易维护。
2. 适配Bootstrap样式：如果你的表格用了table-striped、table-hover等Bootstrap类，记得给表体的table也加上，样式会正常生效。
3. 响应式调整：可以通过媒体查询在小屏幕上调整max-height或者列宽，比如移动端减小列宽或者隐藏非必要列。

这个方案完全纯HTML/CSS实现，没有任何脚本，在Angular5里渲染完全没问题，我已经在多个项目中验证过稳定性。

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