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

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?

Does this answer your question? [Scrollbar on bootstrap table](https://stackoverflow.com/questions/39768189/scrollbar-on-bootstrap-table) — Rocky, Jun 17 '22 at 14:50

Jesper Martinez · Accepted Answer · 2023-03-17T06:00:42.903

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

Thanks - this led me to the desired solution. I had tried the height:200px before posting my question, but I wanted something that would expand/contract based on the size of the window. I ended up with: `
` — jmullend, Jun 17 '22 at 18:39

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

1 Answers1