Sometimes, we want to add a horizontal scrollbar to an HTML table with CSS.
In this article, we’ll look at how to add a horizontal scrollbar to an HTML table with CSS.
How to add a horizontal scrollbar to an HTML table with CSS?
To add a horizontal scrollbar to an HTML table with CSS, we set the overflow property.
For instance, we write
table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
table tbody {
display: table;
width: 100%;
}
to make the table a block element with display: block;
.
We show the scroll bar when the content overflows with overflow-x: auto;
.
And we make the table stay in 1 row with white-space: nowrap;
.
Then we make the tbody fill the width with
table tbody {
display: table;
width: 100%;
}
Conclusion
To add a horizontal scrollbar to an HTML table with CSS, we set the overflow property.