如何在 react 中使 HTML 面向列和基于 div 的表的高度相同

Question

我正在实现一个面向列的&基于div的表，带有React with Typescript，由表外的数据呈现。这些数据是基于列的结构化数据。例如，它渲染列1，然后是行1、行2、行3和列2，然后是列1、行2中、行。。等等

问题是，当其中一个单元格高于其他单元格时，单元格的高度会有所不同然而，我希望这个自定义的基于div的表像具有相同高度的html表标签一样工作

当每行中单元格的高度不同时，如何使每行中的单元格高度相同？

如果行中所有单元格的高度不同，我希望将每行中单元格的高度设置为每行单元格中的最高高度

当前

我的期望

反应标签结构

Answer 1

您的HTML结构有点错误。

.table {
display: table;
width: 100px;
}
.header{
display: table-cell;    
}
.row {
display: table-row; 
}
.cell {
display: table-cell;
border: 1px solid red;
}

<div class="table">
<div class="row">
<div class="header">Header</div>
<div class="header">Header</div>
<div class="header">Header</div>
</div>
<div class="row">
<div class="cell">cell adasd dadad wd rwr r ewrewrrere</div>
<div class="cell">cell</div>
<div class="cell">cell</div>
</div>
<div class="row">
<div class="cell">cell</div>
<div class="cell">cell</div>
<div class="cell">cell</div>
</div>
</div>