基于CSS Grid实现可滚动tbody与列自适应宽度的表格可行吗？

我完全懂你想要解决的这两个痛点——既要让tbody支持滚动（尤其是大数据场景下的虚拟滚动需求），又要保留thead和tbody列根据内容自动适配宽度的特性，而不是手动指定或者均等分配。原生table在设置tbody { display: block; }后确实会丢失列宽联动的特性，这确实挺棘手的。

先聊聊你尝试的display:contents的问题 #

你提到的display:contents确实会让tbody的子元素“穿透”到table层级，导致没法给tbody设置高度来实现滚动——这是这个属性的设计初衷，它本身就是让元素自身不产生盒模型，把子元素直接暴露给父容器。而且嵌套display:contents的元素虽然语法上允许，但实际渲染中可能会出现各种奇怪的布局问题，用来解决这个场景确实不太合适。

更稳妥的CSS Grid替代方案 #

既然你已经参考过CSS Grid相关的资料，其实我们可以用Grid来模拟表格结构，同时完美满足你的两个需求：

• 让thead和tbody共享相同的列轨道定义，实现列宽自动适配
• 给tbody设置固定高度并开启滚动

核心思路 #

• 把整个表格容器设为display: grid，用grid-template-columns: auto auto auto（列数和你的表格一致）让列宽根据内容自动调整，这和原生表格的自动适配逻辑一致
• 将thead的每个表头单元格和tbody的每个数据单元格都设为对应的网格项，保证列严格对齐
• 把tbody单独放在一个容器里，设置固定高度和overflow-y: auto，实现滚动效果

示例代码 #

<div class="table-wrapper">
  <div class="table-header">
    <div class="cell">姓名</div>
    <div class="cell">超长文本测试列，验证自动适配宽度</div>
    <div class="cell">年龄</div>
  </div>
  <div class="table-body">
    <div class="row">
      <div class="cell">张三</div>
      <div class="cell">这是一段很长很长的内容，用来测试列宽是否会自动撑开而不是被截断</div>
      <div class="cell">28</div>
    </div>
    <div class="row">
      <div class="cell">李四</div>
      <div class="cell">短文本</div>
      <div class="cell">32</div>
    </div>
    <!-- 可以添加更多行来测试滚动 -->
  </div>
</div>

.table-wrapper {
  display: grid;
  grid-template-columns: auto auto auto; /* 列数与表格匹配，auto自动适配内容 */
  gap: 1px; /* 模拟表格边框间隙，可选 */
  border: 1px solid #ddd;
  width: fit-content; /* 让容器宽度贴合内容，避免多余留白 */
}

.table-header {
  display: contents; /* 让表头单元格直接成为网格子项，保证列对齐 */
}

.table-header .cell {
  background-color: #f8f9fa;
  font-weight: 600;
  padding: 8px 12px;
}

.table-body {
  grid-column: 1 / -1; /* 让tbody占据所有列 */
  max-height: 300px; /* 设置tbody最大高度，超出则滚动 */
  overflow-y: auto;
  display: grid;
  grid-template-columns: inherit; /* 继承容器的列定义，保证列宽一致 */
}

.row {
  display: contents;
}

.cell {
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
}

关于display:subgrid的补充方案 #

如果你的目标浏览器支持subgrid（Firefox稳定版、Chrome需开启实验性标志），可以用更贴近原生表格结构的方式实现：

• 把原生table设为display: grid，并定义grid-template-columns: auto auto auto;
• thead和tbody都设为display: grid，并设置grid-column: 1 / -1;让它们占据所有列
• 给tbody设置max-height: 300px; overflow-y: auto;实现滚动
• 给thead的tr和tbody的tr设置display: grid; grid-template-columns: subgrid;，这样tr会继承table的列定义，保证thead和tbody的列宽完全联动

不过要注意subgrid的兼容性还不够广泛，如果需要兼容更多浏览器，上面的Grid模拟方案会更稳妥。

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