How to Display Only Horizontal Scroll Bars in a CSS Div Element?

How to Display Horizontal Scroll Bars Only in a CSS Div Element

You have a div container with the following CSS style:

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

This style displays both horizontal and vertical scroll bars automatically when you populate the table contained within the div. However, you only want horizontal scroll bars to appear automatically, leaving you to modify the table's height programmatically.

The expected behavior is to only have horizontal scroll bars when the content is large enough to require them. However, you encounter this issue primarily in Internet Explorer (IE) due to a bug. Verifying in other browsers like Firefox will help isolate the issue.

Beginning with IE6-7, you have the ability to set scrollbars independently using the proposed CSS3 extension:

overflow: auto;
overflow-y: hidden;

For IE8 compatibility, you may also need to add:

-ms-overflow-y: hidden;

Microsoft separates pre-CR-standard properties into their own '-ms' box in IE8 Standards Mode.

Ultimately, IE8 may have resolved this bug, but using these properties provides a workaround for IE6-7 or earlier.

The above is the detailed content of How to Display Only Horizontal Scroll Bars in a CSS Div Element?. For more information, please follow other related articles on the PHP Chinese website!