修复tbody列宽与表头错位问题，实现表头固定及指定滚动效果

核心问题拆解 #

要同时搞定列对齐、表头固定、表头与tbody间距60px且tbody滚动从第一行顶部开始这几个需求，核心思路是用CSS强制列宽统一，结合定位实现表头固定，再通过容器间距或伪元素留出空白间隔。

方案一：固定表头+精确列宽控制（推荐） #

通过table-layout: fixed强制列宽由表头决定，彻底解决列对齐问题，同时用固定定位实现表头置顶，容器预留间距保证tbody内容位置正确。

HTML结构

<div class="table-scroll-container">
  <table class="aligned-table">
    <thead>
      <tr>
        <th>用户ID</th>
        <th>用户名</th>
        <th>注册时间</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1001</td>
        <td>张三</td>
        <td>2024-01-01</td>
        <td>编辑/删除</td>
      </tr>
      <tr>
        <td>1002</td>
        <td>李四</td>
        <td>2024-01-02</td>
        <td>编辑/删除</td>
      </tr>
      <!-- 更多数据行 -->
    </tbody>
  </table>
</div>

CSS样式

/* 滚动容器：控制tbody滚动范围，预留表头+间距位置 */
.table-scroll-container {
  height: calc(100vh - 140px); /* 自定义滚动高度，减去表头高度+间距 */
  overflow-y: auto;
  margin-top: 120px; /* 表头高度(60px) + 要求的60px间距 */
}

/* 表格核心设置：强制列宽统一 */
.aligned-table {
  width: 100%;
  table-layout: fixed; /* 关键：列宽由表头<th>决定，tbody自动匹配 */
  border-collapse: collapse; /* 合并边框，避免错位 */
}

/* 表头固定样式 */
.aligned-table thead {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #ffffff; /* 必须设置背景，防止tbody内容穿透 */
}

.aligned-table thead th {
  padding: 12px;
  border: 1px solid #e0e0e0;
  /* 自定义每列宽度，按需调整 */
  &:nth-child(1) { width: 15%; }
  &:nth-child(2) { width: 30%; }
  &:nth-child(3) { width: 35%; }
  &:nth-child(4) { width: 20%; }
}

/* tbody单元格自动继承表头列宽，无需重复设置 */
.aligned-table tbody td {
  padding: 12px;
  border: 1px solid #e0e0e0;
}

方案二：Sticky表头+伪元素间距（更灵活） #

如果表头高度不固定（比如内容换行），用position: sticky更合适，同时通过伪元素实现表头与tbody的60px间距，无需手动计算高度。

CSS调整部分

.table-scroll-container {
  height: calc(100vh - 40px);
  overflow-y: auto;
}

.aligned-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.aligned-table thead th {
  position: sticky;
  top: 0;
  background: #ffffff;
  padding: 12px;
  border: 1px solid #e0e0e0;
  /* 同样设置列宽 */
  &:nth-child(1) { width: 15%; }
  &:nth-child(2) { width: 30%; }
  &:nth-child(3) { width: 35%; }
  &:nth-child(4) { width: 20%; }
}

/* 表头与tbody的60px间距：通过伪元素实现 */
.aligned-table thead tr:last-child::after {
  content: "";
  display: block;
  height: 60px;
  background: transparent;
}

.aligned-table tbody td {
  padding: 12px;
  border: 1px solid #e0e0e0;
}

关键注意事项 #

1. 列对齐核心：table-layout: fixed是解决tbody与表头列宽不匹配的关键，它会忽略tbody内容宽度，强制以表头设置的列宽为准。
2. 表头背景：固定/sticky的表头必须设置背景色，否则滚动时tbody内容会穿透显示。
3. 滚动容器高度：根据页面布局调整height值，确保滚动区域符合需求。
4. 动态表头高度：如果表头高度不固定，方案二的sticky+伪元素方案更适配，无需手动计算容器margin-top。

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