本文介绍在使用 div 模拟表格时，解决因垂直滚动条占用空间导致表头与表格主体列宽错位的问题，核心方案是改用原生 <table> 语义化标签，并配合 CSS 精确控制对齐与滚动行为。

本文介绍在使用 div 模拟表格时，解决因垂直滚动条占用空间导致表头与表格主体列宽错位的问题，核心方案是改用原生 `

` 语义化标签，并配合 css 精确控制对齐与滚动行为。

在构建具有固定列宽、需支持垂直滚动的“类表格”布局时，开发者常误用 div + inline-block 模拟表格结构。如原始代码所示：.TitleRow 与 .Body 均设为 width: 200px，但 .Body 启用 overflow: scroll 后，浏览器默认在右侧插入垂直滚动条——该滚动条会挤占容器内联内容的可用宽度（通常约 16px），导致 .BodyRow .Cell 的实际渲染宽度小于 .TitleRow .Cell，从而出现列错位。

根本原因在于：滚动条属于容器的装饰性 UI 元素，不参与盒模型的 width 计算，却会压缩内部内容流的可用空间。

✅ 推荐解决方案：回归语义化 HTML 表格结构
原生 <table> 具备天然的列对齐机制（同一列下所有单元格共享列宽），且现代浏览器对 table 的 overflow 处理更可靠。只需将表头置于 <thead>，可滚动主体置于 <tbody>，并限制 <tbody> 高度即可：

<table class="scrollable-table">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
    <!-- 更多数据行 -->
  </tbody>
</table>

.scrollable-table {
  border-collapse: collapse;
  width: 200px; /* 整体宽度 */
}
.scrollable-table th,
.scrollable-table td {
  text-align: center;
  padding: 8px;
  border: 1px solid #ddd;
}
.scrollable-table thead th {
  background-color: #f5f5f5;
  position: sticky;
  top: 0; /* 可选：表头悬停 */
}
.scrollable-table tbody {
  display: block;
  max-height: 150px; /* 控制滚动区域高度 */
  overflow-y: auto;
}
.scrollable-table thead,
.scrollable-table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed; /* 关键：确保列宽严格按定义分配 */
}

⚠️ 注意事项：

• table-layout: fixed 是关键——它使列宽由第一行（<thead>）决定，后续行严格对齐，避免内容撑宽；
• 不要对 <tbody> 设置 width，而是通过父 <table> 和 display: table 的子元素继承保证宽度一致；
• 若需兼容旧版 IE，可添加 tbody { height: 150px; overflow-y: auto; } 并移除 display: block，但现代项目推荐使用上述 flex/table 混合方案；
• 避免在 div 表格中强行用 padding-right: 16px 或 calc(100% - 16px) 补偿滚动条——该值因系统/缩放而异，不可靠。

总结：用对语义化标签（<table>）比用 CSS 修补 div 表格更简洁、健壮、可维护。滚动对齐问题本质是布局模型选择错误，而非样式技巧不足。