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

Posted 2023-03-06

【中文标题】如何使 HTML 面向列和基于 div 的表格的高度在反应中相同

【英文标题】：how to make HTML column-oriented and div based table's height same in react

【发布时间】：2021-12-20 00:58:44

【问题描述】：

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

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

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

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

current

my expectation

react tag structure

【参考方案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>

【讨论】：

我的应用程序中的 HTML 表首先呈现列。例如，它首先呈现第一列，然后呈现第 1 列中的第 1 行，第 1 列中的第 2 行，第 1 列中的第 3 行，然后第 2 列中的第 1 行，第 2 列中的第 2 行，第 2 列中的第 3 行但是您的标签呈现第一行，例如第 1 列，第 2 列，第 1 行中的第 3 列，第 1 列，第 2 列，第 2 行中的第 3 列……我的是相反的