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.
