Issue:
I am facing a challenge with making a <table> element fill 100% of its container's height dynamically, without going over the limit.
Context:
When the height of the <table> surpasses that of the container, I want the ability to scroll through the rows of the table without losing sight of the information above it.
Currently, when the height of the <table> exceeds the container, the scroll bar appears on the container itself, which pushes the content above the table off the viewable page.
Constraints:
I am specifically using <table> elements and do not want to resort to the <div> with display: table method.
Additionally, I am looking for a solution that is adaptable and does not rely on setting a fixed pixel height.
Sample HTML:
<div class="demo-container">
<div class="demo-header">Please do not scroll me off the page</div>
<div class="demo-container>
<div class="table-container">
<table>
<thead>
<tr>
<th>Table Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>The rows are dynamically populated via API and will expand the table's height</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Sample CSS:
.demo-container {
height: 100%
display: grid;
grid-area: body;
grid-template-areas:
'demo-header'
'demo-container';
grid-template-rows: 60px 1fr;
}
.demo-header {grid-area: demo-header;}
.demo-container {grid-area: demo-container;}
.table-container {
height: 100%
overflow-y: auto;
}
I understand that setting the height of .table-container in pixels and using overflow-y: auto can achieve the desired outcome.
However, I am seeking a solution that does not rely on fixed pixel heights and can adapt to changes on the page. Is there an alternative approach that does not involve exact pixel measurements?
Appreciate any insights!