Menu
To make a scroll box with a horizontal scroll, you need to use the overflow-x property. Specifically, you need to use this code: overflow-x:scroll; . This tells your browser to create scroll bars on the x (horizontal) axis, whenever the contents of the container is too wide.
Suppose we want to add a scroll bar option in HTML, use an “overflow” option and set it as auto-enabled for adding both horizontal and vertical scroll bars. If we want to add a vertical bar option in Html, add the line “overflow-y” in the files.
To do this you will first need to set a fixed height (for vertical scrolling) or fixed width (for horizontal scrolling) on the container. Then you can use overflow-x and overflow-y to tell the browser how to handle content that extends outside of that width/height.
The easiest way is to put inside your cell a div filling it and set its overflow style property. If you want the scrollbar to be always visible, even when the content isn't cropped, replace auto with scroll in the CSS.
display: block of your tablethen, 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;
}
This is an improvement of Serge Stroobandt's answer and works perfectly. It solves the issue of the table not filling the whole page width if it has less columns.
<style>
.table_wrapper{
display: block;
overflow-x: auto;
white-space: nowrap;
}
</style>
<div class="table_wrapper">
<table>
...
</table>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With