How to set the tbody height with overflow scroll with CSS?

Sometimes, we want to set the tbody height with overflow scroll with CSS.

In this article, we’ll look at how to set the tbody height with overflow scroll with CSS.

How to set the tbody height with overflow scroll with CSS?

To set the tbody height with overflow scroll with CSS, we set the overflow property.

For instance, we write

<table>
  <thead>
    <th>Invoice Number</th>
    <th>Purchaser</th>
    <th>Invoice Amount</th>
    <th>Invoice Date</th>
  </thead>
  <tbody>
    <tr>
      <td>INV-1233</td>
      <td>james</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>james</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>james</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    ...
  </tbody>
</table>

to add a table.

Then we write

table tbody {
  display: block;
  max-height: 300px;
  overflow-y: scroll;
}

table thead,
table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

to set the max-height and add overflow-y: scroll; to the tbody element to make it scrollable vertically if there’s overflow.

Conclusion

To set the tbody height with overflow scroll with CSS, we set the overflow property.