Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Div with horizontal scrolling only

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?

like image 888
Richard Ev Avatar asked Jan 14 '09 16:01

Richard Ev


People also ask

How do I make a horizontal scroll in a div?

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.

How do I add a horizontal scroll?

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.

How do I scroll horizontally in CSS?

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.


1 Answers

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

like image 163
Sampson Avatar answered Sep 22 '22 05:09

Sampson