Horizontal Overflow

[PMichaud]

I'm trying to accomplish something with CSS and I'm not sure it's possible. I have a table that is floated left and should take up about 96% of its parent div. However, the table will be significantly wider than the parent element in most cases. Let's say the parent is about 500px, and the table is about 1000px. I want the table to have a horizontal overflow scroll bar, while expanding downward as necessary.

I know about the overflow-x and overflow-y css properties, but if I'm not mistaken, these are not widely supported (not even in the CSS spec, right?).

Ideally I'd have a table that was always 96% wide, but overflowed to the right via a scroll bar if the 96% wasn't enough to encompass its width -- I'm even willing to give a hard width to the table if necessary. It needs to work in IE6, IE7, and FF, and I'm hoping I'll only being using CSS.

Is this possible?

[rguy84]

I did inline styling, let me know...

<div style="border:#000000 solid 1px;">
	<div style="overflow:auto; width:96&#37;; border:#000099 solid 1px;">
		<table border="1" width="1000">
....
		</table>
	</div>
</div>

The scrolling is dependent of window size.

[PMichaud]

How does that address the requirement that the table not scroll vertically? Of it's possible to set the container to overflow:scroll, but how do we differentiate between overflow-y and overflow-x?

[rguy84]

From your original post:

I want the table to have a horizontal overflow scroll bar, while expanding downward as necessary.

The child div will give you that horizontal scrollbar if overflowed. Now if you don't want a scrollbar at all, you will need to specify widths for the column. Remember it has to be all percents.

[Little Fish]

OMG! This is exactly what I was looking for and it works so amazingly well!!!

Well, actually, only in Firefox does it work really well. In both IE 6 and 7 it pushes the table all the way across the screen and ignores the overflow request.

Take a peak at http://booksbymaryannmacdonald.com/costume-copycat.htm

I've figured out how to change the color of the scroll bars to enhance the design, (there's a great online tool here http://iconico.com/CSSScrollbar/) but Firefox won't acknowledge the request to change the color (in fact, this tool won't even be shown in Firefox).

If anyone has any thoughts about how I can accomplish both the overflow and the scrollbar color change in IE, I'd greatly appreciate it.