CSS 網格 - 視覺同步行中類似表格的孫單元格的高度相等

Question

有沒有辦法在標題和正文之間自動保持同步表結構的行高？ 我的意思是強制 CSS 網格保持每個 header 和數據行具有相同的高度，盡管它們有不同的父母？ 我不希望標題和正文在 HTML 中共享同一列。 我想要兩個主要列：標題和正文。

此外，行數和正文列數是動態的。 目標是創建比較表，其中標題代表產品特征名稱，正文列代表產品特征值。 此外，表格主體將另外包裹在<div>中，以引入 slider 功能。

AFAIK CSS Subgrid 理論上可以做到這一點，但它僅在 Firefox 中進行實驗

下面是CodePen 上可用的簡化輸入代碼。 我希望“標題 1”、“數據 1.1”、“數據 2.1”單元格具有相同的高度。 更高的行也是如此，例如“標題 2 | 更高的 header 2 | 更高的 header 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 中的同一行）應該決定整行的高度。

下面我附上丑陋的油漆制作的圖片，展示我想要實現的目標：

Answer 1

我通過在 ResizeObserver 的幫助下手動設置每行的ResizeObserver height （通過內聯樣式）等於相鄰行的數據height來解決問題（因此當視口width發生變化時，這些height是動態設置的）。 為了使其工作，我必須將標題和數據列從 Grid 切換到 Flexbox，因為更改 Grid 子項的height不會使它們“占用”（或移動到）剩余的垂直空間（它們的行為就像被粘在軌道上一樣）必然），這發生在 Flexbox 中。

我知道這不是最好的解決方案，但我還沒有想出更好的方法。