213

I have a div container and have defined its style as follows:

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

This gives me both horizontal and vertical scroll bars automatically once I populate my table which is contained by this div. I just want only horizontal scroll bars to appear automatically. I will modify the height of the table programmatically.

How do I do this?

0

10 Answers 10

291

You shouldn't get both horizontal and vertical scrollbars unless you make the content large enough to require them.

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.

IE6-7 (amongst other browsers) supports the proposed CSS3 extension to set scrollbars independently, which you could use to suppress the vertical scrollbar:

overflow: auto;
overflow-y: hidden;

You may also need to add for IE8:

-ms-overflow-y: hidden;

as Microsoft are threatening to move all pre-CR-standard properties into their own ‘-ms’ box in IE8 Standards Mode. (This would have made sense if they'd always done it that way, but is rather an inconvenience for everyone now.)

On the other hand it's entirely possible IE8 will have fixed the bug anyway.

2
  • Oh God, you saved my day! Though i have not tried the ie-8 spec. Its OK now FF & IE-7. That's all i need. Thanks again ! Nov 6, 2009 at 7:16
  • Actually it would be better if you just used overflow-x instead of overflow.
    – M4FI4S
    Jun 21, 2021 at 12:11
79

I also had to add white-space: nowrap; to the style, otherwise elements would wrap down into the area that we're removing the ability to scroll to.

2
  • 9
    white-space: nowrap; is key, without it your elements will stack/wrap. May 2, 2012 at 17:37
  • white-space: nowrap doesn't seem to work on firefox safari or chrome even with the images i've got inside the div display: inline or as blocks
    – user1484249
    Jun 27, 2012 at 0:31
28

This solution is without height/width specification for the father div so it will be responsive to window resizing and most useful cause horizontal scrollbars appears just if needed.

.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
}

Take a look at DEMO

0
25

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>
14

you can also make it overflow: auto and give a maximum fixed height and width that way, when the text or whatever is in there, overflows it'll show only the required scrollbar

6

I use the CSS properties : 1) "overflow-x: auto"; 2) "overflow-y: hidden"; 3) "white-space: nowrap";

Don't forget to set a Width, both for the container and inner DIVS components. The property "white-space : nowrap" allows the inner DIVS not to drop on a different line.

Considering the following HTML:

<div class="container"> 
  <div class="inner-1"></div>
  <div class="inner-2"></div>
  <div class="inner-3"></div>
</div>

I use the following CSS to have an horizontal scroll only:

.container {
  height: 80px;
  width: 600px;
  overflow-x: auto;
  overflow-y: hidden; 
  white-space: nowrap;
}
.inner-1,.inner-2,.inner-3 {
  height: 60px;
  max-width: 250px;
 display: inline-block; /* this should fix it */
}

Fiddle: https://jsfiddle.net/qrjh93x8/ (not working with the above code)

1
3

Use the following

<div style="max-width:980px; overflow-x: scroll; white-space: nowrap;">
<table border="1" style="cellpadding:0; cellspacing:0; border:0; width=:100%;" >
1
.box-author-txt {width:596px; float:left; padding:5px 0px 10px 10px;  border:1px #dddddd solid; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -o-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; overflow-x: scroll; white-space: nowrap; overflow-y: hidden;}


.box-author-txt ul{ vertical-align:top; height:auto; display: inline-block; white-space: nowrap; margin:0 9px 0 0; padding:0px;}
.box-author-txt ul li{ list-style-type:none;  width:140px; }
1
  • 3
    Please explain your answer.
    – Himanshu
    Dec 11, 2012 at 6:22
1

CSS3 has the overflow-x property, but I wouldn't expect great support for that. In CSS2 all you can do is set a general scroll policy and work your widths and heights not to mess them up.

0

We should set to overflow: auto and hide a scrollbar which we don't use for working on unsupporting CSS3 browser. Look at this CSS Overflow; XME.im

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.