I have been working on designing a web page layout that includes two status tables positioned side by side at the top. While I have successfully set this up, I am facing an issue with implementing a vertical scroll feature specifically for the right-hand table.
The goal is to ensure that both tables collectively occupy no more than 25% of the viewport height, with only the right table having a vertical scroll bar in case the data exceeds this limit (while keeping the left table compact). This setup is necessary as additional elements will be added below the tables on the page.
Although I managed to get a vertical scrollbar working by manually setting a specific pixel height for the table, my aim is to make it responsive to different screen sizes without fixed dimensions.
My current webpage incorporates Bootstrap 5 and jQuery 3.6.
To demonstrate, here is an attempt at achieving this layout. You can also refer to this fiddle
HTML
<div class="page-body">
<div class="container-fluid h-25">
<div class="row justify-content-around h-25">
<div class="col">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th colspan="2" style="text-align:center">System Status</th>
</tr>
<tr>
<th>Active Jobs</th>
<th>Queued Jobs</th>
</tr>
</thead>
<tbody>
<td></td>
<td></td>
</tbody>
</table>
</div>
<div class="col overflow-scroll">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th colspan="3" style="text-align:center">Recently Executed Tasks</th>
</tr>
<tr>
<th>Job</th>
<th>Task</th>
<th>Start Time</th>
</tr>
</thead>
<tbody>
<tr>
<td>Job B</td>
<td>Task X</td>
<td>06.06.2022 15:31:17</td>
</tr>
...many more rows...
<tr>
<td>Job B</td>
<td>Task X</td>
<td>06.06.2022 15:31:17</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
CSS
.page-body {
width:100vw;
height:100vh;
}
Despite my efforts to restrict the tables to 25% of the viewport, they end up expanding to fill the entire page. Any suggestions on how to resolve this?