3

There is a div which fills up the height of page. Then there is a table which needs to fill up the divs height. I need the tbody to get a scrollbar when it exceeds the height of table.

Here is my code:

<div class="wrapper">
  <table class="data-table">
    <thead>
    <tr>
      <td>Col 1</td>
      <td>Col 2</td>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>Data 11</td>
      <td>Data 12</td>
    </tr>
    <tr>
      <td>Data 21</td>
      <td>Data 22</td>
    </tr>
    </tbody>
  </table>
</div>

.wrapper {
  height: calc(100vh - 190px);
  overflow: hidden;
  /* should not get scrollbar */
}

.data-table {
  /* needs to fill up wrapper height */

  tbody {
    /* needs to fill up table height and get scrollbar */
  }
}

I've tried the code below but did not succeed:

.wrapper {
  height: calc(100vh - 190px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.data-table {
  height: 100%; /* and also inherit */
  
  tbody {
    height: 100%; /* and also inherit */
    overflow: auto;
  }
}
Alireza A2F
  • 519
  • 4
  • 26
  • Using `table` is not a good solution for this particular case. You can only achieve this if you change the `display` property of the `table` to `block`. If you do so, you break the layout and hence, it is best to use `div` since it is a `block` level element. https://stackoverflow.com/questions/23989463/how-to-set-tbody-height-with-overflow-scroll/23989771 – mahan Aug 04 '21 at 15:16
  • You could wrap the `table` in an extra `div` and add the `max-height: 100%; overflow-y: scroll` to that div. – Amaury Hanser Aug 04 '21 at 16:25

0 Answers0