How to create HTML table with 100% width, with vertical scroll inside tbody with CSS?

Spread the love

Sometimes, we want to create HTML table with 100% width, with vertical scroll inside tbody with CSS.

In this article. we’ll look at how to create HTML table with 100% width, with vertical scroll inside tbody with CSS.

How to create HTML table with 100% width, with vertical scroll inside tbody with CSS?

To create HTML table with 100% width, with vertical scroll inside tbody with CSS, we set the overflow styles of the tbody element.

For instance, we write

thead,
tbody {
  display: block;
}

tbody {
  height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
}

to set the height of tbody to 100px.

And we show the vertical scrollbar if there’s overflowing content with overflow-y: auto;.

We always hide the horizontal scrollbar with overflow-x: hidden;.

Conclusion

To create HTML table with 100% width, with vertical scroll inside tbody with CSS, we set the overflow styles of the tbody element.

Leave a Reply

Your email address will not be published. Required fields are marked *