CSS Grid - 视觉同步行中类似表格的孙单元格的高度相等

问题描述

有没有办法在标题和正文之间自动保持类似表格结构的同步行高？我的意思是强制 CSS Grid 保持每个标题和数据行具有相同的高度，尽管它们有单独的父级？我不希望标题和正文在 HTML 中共享同一列。我想要两个主要列：标题和正文。

此外，行数和正文列数都是动态的。目标是创建比较表，其中标题代表产品特征名称，正文列代表产品特征值。此外，表格主体将额外包裹在 <div> 中以引入滑块功能。

AFAIK CSS Subgrid 理论上可以做到这一点，但它是 experimental in Firefox only

以下是简化的输入代码 available also on CodePen。我希望“标题 1”、“数据 1.1”、“数据 2.1”单元格具有相同的高度。更高的行也是如此，例如“标题 2 | 更高的标题 2 | 但更高的标题 2”、“数据 1.2”、“数据 2.2” - 所有单元格都应具有相同的高度。

.table {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.table__headers,.table__body {
  border: 1px solid black;
}

.table__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  
  border: 1px solid blue;
  margin: 5px;
  padding: 5px;
}

.cell {
  border: 1px solid red;
}

<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>
  </divc>
</div>

以简洁的方式：可视行中最高的单元格（因为标题和正文在技术上位于不同的列中，而不是 HTML 中的同一行）应该决定整行的高度。

下面我附上丑陋的Paint made图片，展示了我想要实现的目标：

解决方法

我通过在 ResizeObserver 的帮助下手动设置每行的标题 height（通过内联样式）等于相邻行的数据 height（所以这些 {{1 }} 是在视口 height 更改时动态设置的）。为了使它工作，我必须将标题和数据列从 Grid 切换到 Flexbox，因为为 Grid 子项更改 width 不会使它们“占据”（或移入）剩余的垂直空间（它们的行为就像是粘在它们所绑定的轨道上），这发生在 Flexbox 中。

我知道这不是最好的解决方案，但我还没有想出任何更好的方法。