本文介绍在使用 div 模拟表格时，解决因垂直滚动条占用空间导致标题列与数据列错位的问题，重点推荐语义化 <table> 方案，并提供兼容性更强的 CSS 修复技巧。

本文介绍在使用 div 模拟表格时，解决因垂直滚动条占用空间导致标题列与数据列错位的问题，重点推荐语义化 `

` 方案，并提供兼容性更强的 css 修复技巧。

在构建具有固定宽度、需支持垂直滚动的“伪表格”（即用 div + CSS 模拟 table 行为）时，一个常见痛点是：.Body 容器启用 overflow: scroll 后，右侧滚动条会挤占容器内部可用宽度，导致 .Cell 的百分比宽度计算基准变小，最终使数据行列宽与标题行列宽无法对齐——视觉上出现明显的错位。

虽然问题中尝试用 display: inline-block 和百分比宽度模拟表格布局，但该方式缺乏原生表格的列宽同步机制，且滚动条宽度（通常 16–17px）会动态破坏布局一致性。

✅ 首选方案：回归语义化 HTML 表格
现代浏览器对 <table> 的样式控制已非常成熟，配合少量 CSS 即可实现滚动+对齐效果，且天然保证标题（<th>）与数据（<td>）列宽自动同步：

<div class="TableWrapper">
  <table>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>Data 1</td><td>Data 2</td></tr>
      <tr><td>Data 3</td><td>Data 4</td></tr>
      <!-- 更多行... -->
    </tbody>
  </table>
</div>

.TableWrapper {
  width: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #ddd;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* 关键：锁定列宽，避免内容撑开 */
}

th, td {
  text-align: center;
  padding: 8px;
  border: 1px solid #eee;
}

th {
  background-color: #f5f5f5;
  font-weight: 600;
}

/* 统一列宽（可选） */
th:first-child, td:first-child { width: 40%; }
th:last-child, td:last-child { width: 60%; }

⚠️ 注意事项：

• 必须设置 table-layout: fixed，否则浏览器按内容自动分配列宽，无法保证标题与数据列严格对齐；
• 将 overflow 应用于外层 div.TableWrapper，而非 <tbody>（tbody 不支持 overflow），从而让滚动作用于整个表格区域，同时保持表头（thead）始终可见；
• 避免对 th/td 设置 display: inline-block 或 width 百分比混合使用——这会破坏表格固有布局逻辑。

? 若必须使用 div 布局（如复杂交互需求）：
可通过 scrollbar-gutter: stable both-edges（Chrome 111+、Firefox 119+ 支持）预留滚动条空间，防止重排：

.Body {
  width: 200px;
  overflow-y: scroll;
  scrollbar-gutter: stable both-edges; /* 预留滚动条位置，保持宽度稳定 */
}

或采用更兼容的 hack —— 强制滚动条始终显示并隐藏其视觉样式，再通过 padding-right 补偿：

.Body {
  width: 200px;
  overflow-y: scroll;
  padding-right: 17px; /* 补偿滚动条宽度 */
}

.Body::-webkit-scrollbar {
  width: 17px;
}
.Body::-webkit-scrollbar-track {
  background: transparent;
}
.Body::-webkit-scrollbar-thumb {
  background: transparent;
}

? 总结：
优先选用 <table> + table-layout: fixed + 外层滚动容器的组合，语义清晰、兼容性好、维护成本低；仅在框架限制或特殊交互场景下才考虑 div 方案，并务必通过 scrollbar-gutter 或显式宽度补偿应对滚动条干扰。对齐的本质不是“像素级微调”，而是选择能自然维持列宽一致性的布局模型。