Set table to 25% height and add vertical scroll in Bootstrap - html

Question

I am attempting to create a section at the top of a web page that will show 2 status tables side by side. I have this setup, but am unable to get one element working - adding a vertical scroll to the right-hand table.
I want the tables to occupy at most 25% of the viewport height and have a vertical scroll on the right table when the data would exceed that size (the left hand table data should remain small). The reason for this is that there will be other items added to the page underneath the table.
I am able to get a vertical scroll to work if I manually set the table to a certain pixel height, but this is not desired as I want it to be responsive to the screen size.
My page is using Bootstrap 5 and jQuery 3.6.
Here is an example of an attempt, you can also use 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;
}
Instead of keeping to 25% of the view as I desire, the table expands to fill the entire page.
Any tips for how to fix this?

Answer 1

In order to perform the scrollable in a vertical position, you have to make sure that your parent element has a fixed height using CSS: e.g.: style="height:200px;" And your HTML code just looks like this.
<div class="page-body">
<div class="container-fluid h-25">
<div class="row">
<div class="col-md-6 overflow-scroll" style="height:200px;">
<table class="table table-bordered table-hover">
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="col-md-6 overflow-scroll" style="height:200px;">
<table class="table table-bordered table-hover">
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
I hope this will help you. If you just want to get more advance in Web development, please kindly check out my Web Programming Course
Thanks