Menu
I have a fixed width DIV containing a table with many columns, and need to allow the user to scroll the table horizontally within the DIV.
This needs to work on IE6 and IE7 only (internal client application).
The following works in IE7:
overflow-x: scroll; Can anyone help with a solution that works in IE6 as well?
888
Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only the horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line. Here the scroll div will be horizontally scrollable.
Basic Horizontal Scroll Box 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.
To enable horizontal scrolling, we can use the CSS property overflow-x. If we assign the value scroll to the overflow-x property of the container element, the browser will hide horizontally overflowing content and make it accessible via horizontal scrolling.
The solution is fairly straight forward. To ensure that we don't impact the width of the cells in the table, we'll turn off white-space. To ensure we get a horizontal scroll bar, we'll turn on overflow-x. And that's pretty much it:
.container { width: 30em; overflow-x: auto; white-space: nowrap; } You can see the end-result here, or in the animation below. If the table determines the height of your container, you should not need to explicitly set overflow-y to hidden. But understand that is also an option.
163
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
