Div with horizontal scrolling only

html css internet-explorer
Richard Ev picture Richard Ev · Jan 14, 2009 · Viewed 356.7k times · Source

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?

Answer

Sampson picture Sampson · Jan 14, 2009

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.

enter image description here

Related questions

Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Remove the complete styling of an HTML button/submit

Is there a way of completely removing the styling of a button in Internet Explorer? I use a css sprite for my button, and everything looks ok. But when I click the button, it moves to the top a little, …

Read More
Tools to selectively Copy HTML+CSS+JS From A Specific Element of DOM

Like most web developers, I occasionally like to look at the source of websites to see how their markup is built. Tools like Firebug and Chrome Developer Tools make it easy to inspect the code, but if I want to …

Read More