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

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 >
  <div >
    <div >

      <div >
        <table >
          <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 >
    <table >
      <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?

CodePudding user response：

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 >
  <div >
    <div >

      <div  style="height:200px;">
        <table >
          <thead>

          </thead>
          <tbody>

          </tbody>
        </table>      
      </div>

      <div  style="height:200px;">
        <table >
          <thead>

          </thead>
          <tbody>

          </tbody>
        </table>
      </div>
      
    </div>
  </div>
</div>

I hope this will help you. If you want to get more advance in Web development, please kindly check out this link https://jbm-blog.com/category/programming

Thanks