I'm experimenting with creating a master-detail view by showcasing two CSS tables (display:table) side by side. To organize the layout, I've implemented CSS Grid.
The master panel typically contains 1 to 10 rows while the detail content can exceed 50-60 rows.
Check out my CodePen for reference: https://codepen.io/rahuldj/pen/ExYPpGm
While everything displays correctly in Chrome, I encountered an issue in Firefox where the table with fewer rows expands to match the height of the longer table.
I attempted to set specific heights for rows, but it seems that Firefox disregards these settings when the parent element is a grid. Any ideas on how to resolve this?
Here's the HTML structure:
<div class="grid">
<div class="table">
<div class="th">
<div>Column 1</div>
<div>Column 2</div>
</div>
<div class="row">
<div>Data 1</div>
<div>Data 2</div>
</div>
</div>
<div class="table">
<div class="th">
<div>Column 1</div>
<div>Column 2</div>
</div>
<div class="row">
<div>Data 1</div>
<div>Data 2</div>
</div>
<div class="row">
<div>Data 1</div>
<div>Data 2</div>
</div>
<!-- Additional rows here -->
</div>
</div>
CSS Styling:
.grid{
display:grid;
grid-template-columns:0.3fr 0.7fr;
grid-column-gap:30px;
}
.table{
display:table;
width:100%;
}
.th {
display:table-row;
font-weight:bold;
}
.th > div{
display:table-cell;
}
.row{
display:table-row;
}
.row > div{
display: table-cell;
}