0

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

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

AFAIK CSS Subgrid 理论上可以做到这一点，但它仅在 Firefox 中是实验性的

下面是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 中的同一行）应该决定整行的高度。

下面我附上丑陋的油漆制作的图片，展示我想要实现的目标： 在此处输入图像描述

4

1 回答 1

0

我通过手动将每行的标题height（通过内联样式）设置为等于相邻行的数据height来解决方法ResizeObserver（因此这些s 在视口更改height时动态设置）。width为了使它工作，我必须将标题和数据列从 Grid 切换到 Flexbox，因为更改heightGrid 子项不会使它们“占用”（或移动到）剩余的垂直空间（它们的行为就像被粘在轨道上一样）绑定到），这发生在 Flexbox 中。

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

于 2021-06-01T07:45:52.910 回答