如何通过CSS Grid实现类表格结构表头与表体的行高自动同步

好问题！你提到的CSS Subgrid确实是解决这类跨独立容器行高同步的理想方案，但它目前仅在Firefox处于实验性支持阶段，没法直接用于生产环境。不过我们有几个可靠的替代方案，既能满足你的核心需求——表头和表体分属两个主列、支持动态行数/列数、表体可滑动，又能兼容所有现代浏览器。

方案一：JavaScript动态同步最高行高 #

这是最贴合你现有HTML结构的方案，核心思路是：遍历每一组对应行的单元格（表头单元格 + 各数据列的对应行单元格），找到其中高度最高的那个，然后把这个高度统一应用到该行的所有单元格上。我们还可以把逻辑封装成函数，方便初始化和动态更新时调用。

完整实现代码 #

HTML（完全保留你原有的结构）

<div class="table">
  <div class="table__headers">
    <div class="cell">Header 1</div>
    <div class="cell"> Header 2 <br> higher header 2 <br> yet higher header 2 </div>
    <div class="cell"> Header 3 <br> higher header 3 </div>
    <div class="cell">Header 4</div>
  </div>
  <div class="table__body">
    <div class="table__body-inside">
      <div class="cell">Data 1.1</div>
      <div class="cell">Data 1.2</div>
      <div class="cell">Data 1.3</div>
      <div class="cell">Data 1.4</div>
    </div>
    <div class="table__body-inside">
      <div class="cell">Data 2.1</div>
      <div class="cell">Data 2.2</div>
      <div class="cell">Data 2.3</div>
      <div class="cell">Data 2.4</div>
    </div>
  </div>
</div>

CSS（添加表体滑动样式，优化布局）

.table { 
  display: grid; 
  grid-template-columns: 1fr 2fr;
  gap: 10px; /* 给两列之间留点间距更美观 */
}
.table__headers, .table__body { 
  border: 1px solid #000;
}
.table__body { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  border: 1px solid blue; 
  padding: 5px;
  /* 实现表体横向滑动（列数过多时生效） */
  overflow-x: auto;
}
.table__body-inside {
  display: grid;
  grid-template-rows: repeat(auto-fit, min-content);
}
.cell { 
  border: 1px solid red;
  padding: 8px;
  box-sizing: border-box; /* 确保内边距不会撑大单元格 */
}

JavaScript 同步逻辑

function syncRowHeights() {
  // 获取表头的所有单元格
  const headerCells = document.querySelectorAll('.table__headers .cell');
  // 获取所有数据列容器
  const bodyColumns = document.querySelectorAll('.table__body-inside');
  
  // 如果没有表头或数据列，直接退出
  if (!headerCells.length || !bodyColumns.length) return;

  // 遍历每一行索引
  for (let rowIdx = 0; rowIdx < headerCells.length; rowIdx++) {
    let maxHeight = 0;
    // 收集当前行的所有单元格：表头单元格 + 各数据列的对应行单元格
    const currentRowCells = [
      headerCells[rowIdx],
      ...Array.from(bodyColumns).map(col => col.querySelectorAll('.cell')[rowIdx])
    ].filter(cell => cell); // 过滤可能不存在的单元格（比如数据列行数和表头不一致的情况）

    // 先重置所有单元格高度，避免之前的设置影响真实高度计算
    currentRowCells.forEach(cell => cell.style.height = 'auto');
    // 找到当前行最高的单元格高度
    currentRowCells.forEach(cell => {
      const cellHeight = cell.offsetHeight;
      if (cellHeight > maxHeight) maxHeight = cellHeight;
    });
    // 把最高高度应用到当前行的所有单元格
    currentRowCells.forEach(cell => cell.style.height = `${maxHeight}px`);
  }
}

// 页面加载完成后初始化同步
window.addEventListener('load', syncRowHeights);
// 窗口大小变化时重新同步（响应式场景下很有用）
window.addEventListener('resize', syncRowHeights);
// 如果你有动态更新内容的操作，记得在内容更新后调用syncRowHeights()

这个方案的优势 #

• 完全兼容Chrome、Edge、Safari等所有现代浏览器
• 完美适配你的现有HTML结构，不需要调整布局层级
• 支持动态行数和列数，只要表头单元格数量和每个数据列的单元格数量保持一致即可
• 可以处理内容动态变化的场景，比如异步加载数据后，只需调用同步函数就能重新对齐行高

方案二：微调HTML结构（纯CSS实现） #

如果你能接受对HTML结构做一点小调整，我们可以把每一行的表头和数据单元格放在同一个网格行里，这样CSS Grid就能自动帮我们同步行高，同时表体部分可以通过嵌套容器实现滑动。不过这个方案改变了原来的垂直表头布局，适合能接受结构调整的场景：

<div class="table">
  <!-- 表体滑动容器 -->
  <div class="table__body-scroll">
    <div class="table__body">
      <!-- 第一行：表头 + 数据 -->
      <div class="cell header-cell">Header 1</div>
      <div class="cell">Data 1.1</div>
      <div class="cell">Data 2.1</div>
      <!-- 第二行 -->
      <div class="cell header-cell">Header 2 <br> higher header 2 <br> yet higher header 2</div>
      <div class="cell">Data 1.2</div>
      <div class="cell">Data 2.2</div>
      <!-- 后续行以此类推 -->
    </div>
  </div>
</div>

.table__body-scroll {
  overflow-x: auto; /* 实现横向滑动 */
}
.table__body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 1列表头 + N列数据 */
}
.header-cell {
  background-color: #f5f5f5;
  font-weight: bold;
}
.cell {
  border: 1px solid red;
  padding: 8px;
  box-sizing: border-box;
}

这个方案不需要任何JavaScript，纯CSS就能实现行高同步，但需要调整原来的垂直表头结构为每行的第一个单元格。

未来方案：CSS Subgrid #

等Subgrid的兼容性提升后（预计未来几年会逐步支持所有主流浏览器），你可以直接用Subgrid来实现，代码会更简洁：

.table {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: repeat(4, auto); /* 行数等于表头单元格数 */
}
.table__headers {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
}
.table__body-inside {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
}

不过现在这个方案还没法用于生产环境，所以还是先用上面的JS或结构调整方案更稳妥。

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