How can I only show horizontal scroll bars in a CSS div element?

Problem

I’ve created a div container with the following style:

div#tbl-container 
{
    width: 600px;   
    overflow: auto;    
    scrollbar-base-color:#ffeaff
}

Once I populate my table, which is confined by this div, I get both horizontal and vertical scroll bars automatically. I just want horizontal scroll bars to display on their own. I’m going to programmatically change the table’s height.

How do I go about doing this?

Asked by Julius A

Solution #1

You shouldn’t have both horizontal and vertical scrollbars unless your material is sufficiently large to warrant both.

However you typically do in IE due to a bug. Check in other browsers (Firefox etc.) to find out whether it is in fact only IE that is doing it.

The proposed CSS3 extension to adjust scrollbars independently, which you could use to suppress the vertical scrollbar, is supported by IE6-7 (among other browsers):

overflow: auto;
overflow-y: hidden;

You may also need to provide the following for Internet Explorer 8:

-ms-overflow-y: hidden;

In IE8 Standards Mode, Microsoft has threatened to transfer any pre-CR-standard properties into their own ‘-ms’ box. (This would have made sense if they’d always done it that way, but it’s causing everyone a lot of grief now.)

On the other hand, it’s possible that IE8 will have already corrected the bug.

Answered by bobince

Solution #2

Otherwise, elements would wrap down into the area where we’re removing the ability to scroll, thus I had to add white-space: nowrap; to the style.

Answered by Hoby

Solution #3

This solution does not include a height/width specification for the parent div, so it will respond to window resizing and, more importantly, horizontal scrollbars will only show if they are required.

.container{
    padding:20px;
    border:dotted 1px;
    white-space:nowrap;
    overflow-x:auto;
}

.box{
    width:100px;
    height:180px;
    background-color: red;
    margin:10px;
    display:inline-block
}

DEMO is a good place to start.

Answered by Marco Allori

Solution #4

To show both:

<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: scroll; padding-bottom:10px;">      </div>

Hide X Axis:

<div style="height:250px; width:550px; overflow-x:hidden; overflow-y: scroll; padding-bottom:10px;">      </div>

Hide Y Axis:

<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;">      </div>

Answered by Dinesh Appuhamy

Solution #5

You can alternatively set it to overflow: auto and specify a maximum fixed height and width, so that when the text or whatever is in there overflows, only the appropriate scrollbar is displayed.

Answered by Tsundoku

Post is based on https://stackoverflow.com/questions/258372/css-div-element-how-to-show-horizontal-scroll-bars-only