Creating uniform heights for HTML column-based tables using divs in a React environment

Question

Creating uniform heights for HTML column-based tables using divs in a React environment

I am developing a unique column-oriented and div-based table using React with Typescript. The data outside the table is organized in a column-based structure, rendering column 1 followed by row 1, row 2, row 3, then column 2 with its respective rows.

The issue arises when the height of a cell varies due to one cell being taller than the others. I desire for this custom div-based table to function like an HTML table tag, ensuring uniform cell height.

How can I ensure that the height of cells within each row are consistent, even if the heights vary between cells within the same row?

I aim for the height of cells within each row to be set to the highest height among all cells within that row, regardless of any differences in individual cell heights.

View Current Layout

Expected Outcome

React Tag Structure

html css reactjs html-table

Answer 1

Answer №1

It seems like there is an issue with the structure of your 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>

Answer 2

It seems like there is an issue with the structure of your 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>

Creating uniform heights for HTML column-based tables using divs in a React environment

Answer №1

Similar questions

What is the best way to adjust the content of a Bootstrap Column to be at the bottom of the column

Property finally is missing in the Response type declaration, making it unassignable to type Promise<any>

Include a clickable hyperlink within a column in JQGrid that, when clicked, triggers a specific Jquery function

Incorporating timed hover effects in React applications

Transform a traditional class component into a functional component

Adding a marker to Google Maps in React that displays the user's current location

Error: The function `map` is not applicable to MemberStore.members

Showcase each video stored within a specific directory in the form of a list using HTML 5

Alignment of UI Divs with CSS Bootstrap and HTML

What is the solution to adding values from a counter?

Issues with React - Material UI Menu functionality

The vertical scrollbar appears to be malfunctioning

When using angular.less, the @import feature is functioning correctly but a 404 error is displayed in the

Is there a way to make height: 100% adjust to accommodate other elements with specific pixel heights within the same div?

What could be causing the error in this test that utilizes Jest and react-test-renderer? Could it be due to the attempt to parse a .graphql file?

Preventing the Select component from constantly realigning

Using JQuery to enable checkbox if another is selected

Troubleshooting a problem with data retrieval in Hygraph and Next JS

What are the steps to create two frames using Twitter Bootstrap?

Why Bootstrap 4 collapse feature is not functioning correctly within a ReactJS map component?