解决基于div的表格主体滚动栏与标题列对齐问题

问题说明 #

用Div搭建类表格结构，要求单元格宽度用百分比定义，表格主体带垂直滚动条，但滚动条会占用额外空间，导致主体单元格和标题列错位。原代码如下：

原CSS代码 #

html {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
}

.TitleRow {
  width: 200px;
}

.Body {
  width: 200px;
  overflow: scroll;
}

.Cell {
  display: inline-block;
  text-align: center;
  width: 40%;
}

原HTML代码 #

<div class="TitleRow">
  <div class="Cell">
      Column 1
  </div>
  <div class="Cell">
      Column 2
  </div>
</div>
<div class="Body">
  <div class="BodyRow">
    <div class="Cell">
      Data 1
    </div>
    <div class="Cell">
      Data 2
    </div>
  </div>
</div>

修复方法 #

1. 用scrollbar-gutter属性（现代浏览器首选） #

这是CSS专门解决滚动条布局偏移的属性，能提前为滚动条预留空间，避免滚动条出现时挤压内容。修改.Body的样式：

.Body {
  width: 200px;
  overflow-y: auto; /* 只在内容超出时显示垂直滚动条 */
  scrollbar-gutter: stable; /* 为滚动条预留固定空间，防止布局跳动 */
}

保持.TitleRow的宽度和.Body一致，这样标题和主体的可用内容宽度完全相同，百分比宽度的单元格就能精准对齐。

2. 手动抵消滚动条宽度（兼容旧浏览器） #

如果需要兼容不支持scrollbar-gutter的浏览器，可以给标题行加右侧内边距，模拟滚动条占用的空间：

.TitleRow {
  width: 200px;
  padding-right: 17px; /* 多数浏览器滚动条宽度是17px */
}

.Body {
  width: 200px;
  overflow-y: auto;
}

注意：不同浏览器滚动条宽度可能有差异，要是追求精准，可以用JS动态计算滚动条宽度后再设置padding值。

3. 统一容器宽度逻辑 #

把标题行和主体都放进一个固定宽度的容器里，让它们继承容器宽度，确保单元格的百分比计算基于同一个父容器宽度：

.TableContainer {
  width: 200px;
}

.TitleRow {
  width: 100%;
}

.Body {
  width: 100%;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

对应的HTML调整：

<div class="TableContainer">
  <div class="TitleRow">
    <div class="Cell">Column 1</div>
    <div class="Cell">Column 2</div>
  </div>
  <div class="Body">
    <div class="BodyRow">
      <div class="Cell">Data 1</div>
      <div class="Cell">Data 2</div>
    </div>
    <!-- 多加点数据触发滚动条 -->
    <div class="BodyRow"><div class="Cell">Data 3</div><div class="Cell">Data 4</div></div>
    <div class="BodyRow"><div class="Cell">Data 5</div><div class="Cell">Data 6</div></div>
  </div>
</div>

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