Add horizontal scrollbar to html table
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%;
}
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.
Wrap the table in a DIV, set with the following style:
div.wrapper {
width: 500px;
height: 500px;
overflow: auto;
}