CODEWITHSUNDEEP
htmlcssreactjshtml-table
jihoon
jihoon

Reputation: 19

how to make HTML column-oriented and div based table's height same in react

I am implementing a column-oriented & div based table with React with Typescript, which is rendered by data outside table. this data are structured column based. for example it renders column 1 and then row 1, row 2 , row 3 and column 2 then row 1, row 2, row ..and so on

The problem is the height of a cell differs when one of cells is higher than others However I would like this custom div based table work like html table tag with same height

How can i make height of cells in each rows same when height of cells in each row differ ?

i want the height of cells in each row to be set highest height among cells in each row if all height of cells differ in the row

current

my expectation

react tag structure

Upvotes: 0

Views: 705

Answers (1)

Azu
Azu

Reputation: 1550

Your HTML structure is a bit wrong.

.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>

Upvotes: 1

Related Questions