Hello All,
I have a simple 2 column layout with a left side and a content area.

ex:
|///////////|///////////////////////|
|  leftside |      content       |
|///////////|///////////////////////|

One of the site’s pages has the content area populated with a table used for data. However this table is dynamically created. There are times when it could be 500px wide while other times it could be 5000px wide. The page need to accommodate a large width range on the fly.

When the page is, to use the extreme, 5000px wide I need for the browser window to realize this and create a horizontal scroll bar. Plus it needs to pull the background color of the table’s container, and some other elements with it.

I can get it to work if I hard code a width in the body element, but because the table is dynamically generated the width is unknown.

Any ideas?

Thanks

I don’t think you will achieve this with tables. Try using an unordered list and float your elements. Each added element floating to the left, and overflow:scroll; on body. And do not put the elements in a fixed width container, so they can expand beyond the viewport width, thus creating the horizontal scrollbar..Not tested, just a guess..

p.s: horizontal scrollbars are damn disturbing. To avoid if possible..

Thanks for the response.

I like the idea of using list elements however it will not work in this case (many other factors that I can not get into right now) and I would have to use list items as container that have a lot of other stuff in them…so it is not really a list item any more. I like the thought though.

Believe me I am well aware of the disturbing nature of horizontal scroll bars. But this is a case in which there is a dynamically created table (data) and the amount of data is unknown until it is printed on the page.

I ended up using a javascript solution.

yes, js is the best solution in such a case..