Add a horizontal scrollbar to an HTML table
Is there a way to add a horizontal scrollbar to an HTML table? I actually need it to be scrollable both vertically and horizontally depending on how the table grows but I cannot get either scrollbar to appear.
Solution 1:
First, make a display: block
of your table
then, set overflow-x:
to auto
.
table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
Nice and clean. No superfluous formatting.
Here are more involved examples with scrolling table captions from a page on my website.
If an issue is taken about cells not filling the entire table, append the following additional CSS code:
table tbody {
display: table;
width: 100%;
}
Solution 2:
Did you try CSS overflow
property?
overflow: scroll; /* Scrollbar are always visible */
overflow: auto; /* Scrollbar is displayed as it's needed */
UPDATE
As other users are pointing out, this is not enough to add the scrollbars.
So please, see and upvote comments and answers below.