如何实现仅tbody滚动时th与td宽度一致（含滚动条宽度适配）

核心调整逻辑 #

• 新增公共父容器统一管控两个表格的总宽度
• 启用table-layout: fixed强制表格按设定列宽渲染，不受内容长度影响
• 内容表格主动减去滚动条宽度，表头表格保持100%宽度实现背景铺满整个顶部区域（含滚动条上方位置）
• 强制tbody内的tr保持表格行布局，匹配列宽规则

调整后代码 #

HTML代码 #

<div class="table-wrap">
  <!-- 头部表格 -->
  <table class="table-head">
    <thead>
      <tr>
        <th class="red">Header 1</th>
        <th class="red">Header 2</th>
        <th class="red">Header 3</th>
        <th class="red">Header 4</th>
        <th class="red">Header 5</th>
      </tr>
    </thead>
  </table>
  <!-- 内容表格 -->
  <table class="table-body">
    <tbody>
      <tr>
        <td class="red">Content 1</td>
        <td class="red">Content 2</td>
        <td class="red">Content 3</td>
        <td class="red">Content 4</td>
        <td class="red">Content 5</td>
      </tr>
      <tr>
        <td class="red">Content 1</td>
        <td class="red">Content 2</td>
        <td class="red">Content 3</td>
        <td class="red">Content 4</td>
        <td class="red">Content 5</td>
      </tr>
      <tr>
        <td class="red">Content 1</td>
        <td class="red">Content 2</td>
        <td class="red">Content 3</td>
        <td class="red">Content 4</td>
        <td class="red">Content 5</td>
      </tr>
      <tr>
        <td class="red">Content 1</td>
        <td class="red">Content 2</td>
        <td class="red">Content 3</td>
        <td class="red">Content 4</td>
        <td class="red">Content 5</td>
      </tr>
      <tr>
        <td class="red">Content 1</td>
        <td class="red">Content 2</td>
        <td class="red">Content 3</td>
        <td class="red">Content 4</td>
        <td class="red">Content 5</td>
      </tr>
    </tbody>
  </table>
</div>

CSS代码 #

/* 公共容器 可自定义总宽度 */
.table-wrap {
  width: 600px;
}
/* 统一表格布局规则 合并边框避免错位 */
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  border:1px solid red;
}
/* 表头背景直接铺满整个顶部 包含滚动条上方区域 */
.table-head th {
  background: red; /* 替换为你需要的表头背景色即可 */
}
/* 内容表格宽度减去滚动条默认宽度（约17px） */
.table-body {
  width: calc(100% - 17px);
}
/* 滚动配置 */
.table-body tbody {
  display: block;
  height: 50px;
  overflow-y: scroll;
}
/* 强制tbody内的tr按表格行布局 占满内容表格宽度 */
.table-body tbody tr {
  display: table;
  width: 100%;
}
/* 统一列宽 5列的话每列设20%即可 也可自定义固定px值 */
th.red, td.red {
  width: 20%;
  border:1px solid red;
}

可选跨浏览器兼容方案 #

如果需要适配不同浏览器的滚动条宽度差异，可添加以下JS动态计算滚动条宽度，替换固定的17px值：

const getScrollbarWidth = () => {
  const div = document.createElement('div')
  div.style.width = '100px'
  div.style.height = '100px'
  div.style.overflowY = 'scroll'
  div.style.position = 'absolute'
  div.style.top = '-9999px'
  document.body.appendChild(div)
  const scrollbarWidth = div.offsetWidth - div.clientWidth
  document.body.removeChild(div)
  return scrollbarWidth
}
document.querySelector('.table-body').style.width = `calc(100% - ${getScrollbarWidth()}px)`

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