如何为CSS模拟表格的table-row-group主体添加滚动效果？

用display: table-row-group模拟的表格主体无法触发overflow-y: scroll，核心原因有两个：

• CSS表格布局的盒模型限制：table-row-group属于表格布局的内部组件，它不是独立的块级容器，浏览器会把它和table-header-group、table一起纳入匿名表格盒的布局计算，不会单独识别它的overflow属性。
• 高度无法被约束：table-row-group的高度默认由内部行元素自动撑开，即使你给它设置高度，在表格布局规则下也会被忽略——表格会优先保证内容完整展示，不会让内部容器出现滚动。

你看到外层卡片滚动，是因为外层是块级容器，带有overflow属性，当表格整体高度超过卡片高度时，自然触发外层滚动；移除外层overflow后，表格会直接撑开父容器，根本不会出现局部滚动的情况。

要实现表格主体滚动，得打破纯CSS表格布局的限制，给可滚动的主体部分套一个独立的块级容器：

• 把table-header-group（表头）和table-row-group（表体）分开，各自放在独立的display: table容器里
• 给表体的外层容器设置固定高度和overflow-y: scroll
• 为了保证表头和表体的列对齐，需要给每一列设置统一的宽度（比如用width属性）

举个简单的结构示例：

<div class="card">
  <!-- 表头容器 -->
  <div class="table-header-container">
    <div style="display: table;">
      <div style="display: table-header-group;">
        <div style="display: table-row;">
          <div style="display: table-cell; width: 200px;">表头1</div>
          <div style="display: table-cell; width: 300px;">表头2</div>
        </div>
      </div>
    </div>
  </div>
  <!-- 表体滚动容器 -->
  <div style="height: 300px; overflow-y: scroll;">
    <div style="display: table;">
      <div style="display: table-row-group;">
        <!-- 多行数据 -->
        <div style="display: table-row;">
          <div style="display: table-cell; width: 200px;">内容1</div>
          <div style="display: table-cell; width: 300px;">内容2</div>
        </div>
      </div>
    </div>
  </div>
</div>

这样表体容器是独立的块级元素，有固定高度，就能正常触发垂直滚动，同时通过统一列宽保证表头和表体对齐。

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