html - 如何使 HTML 面向列和基于 div 的表格的高度在反应中相同

Question

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

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

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

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

当前的

我的期望

反应标签结构

标签： htmlcssreactjshtml-table

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>