Table width 100% resize while horizontal scrolling issue

[Platiz0]

Have a question can't quite figure this out and its driving me nuts, figured you guys could help me out.

I have two tables, have an example here plus this is a test code:

<table width="100%">
 <tr>
 <td bgcolor="#0033FF" style="text-align: left; color: #ffffff;">Table A</td>
 </tr>
</table>
<br>
<table width="800">
 <tr>
 <td bgcolor="#00FFFF" style="text-align: left; color: #000000;">Table B</td>
 </tr>
</table>

Now, if you resize the window (not maximize it, make it like half your screen (( just like how it would show in a 640x480 enviornment )) now use the horizontal scroll bar and notice that Table A will not adjust to the screen size it seems to be "fixed" to that resolution or / window size, I want it to stretch along when you are scrolling horizontally with the scrollbar)

This is driving me nuts and i've searched google for countless days trying to find a fix but with no luck!

Any ideas are much appreciated! Thanks guys.
Plat

Does the same thing in Firefox and Internet Explorer

Table B must stay at 800px.

Cheers
Plat

<Sorry, no personal URLs.
See Forum Charter [webmasterworld.com]>

[edited by: tedster at 3:12 pm (utc) on Mar. 11, 2006]

[tedster]

Hello Platiz0, and welcome to the forums.

I'm not sure what is happening here for you. For me, the code you posted works -- table A resizes with the window (all the way down to very small widths) and Table B stays at 800 px. Tested in IE, FF, and Opera.

[Platiz0]

you gotta resize the window and then scroll horizontally
notice table A does not follow it seems to be fixed.

I need it to size 100% while you are scrolling to keep the top table an actual 100% width.

if that made sense? :0

[edited by: encyclo at 11:37 pm (utc) on Mar. 11, 2006]

[tedster]

Now I get what you mean by "stretch along when you are scrolling horizontally" -- but I have no idea how to get that kind of dynamic behavior with html alone, because 100% means 100% of the viewport. Just because the user scrolled right, that hasn't changed the width of the viewport.

Maybe you can get the effect you are after with javascript. The script would capture how far you've scrolled right and then use that number to set a new width for the table.

[Platiz0]

what javascript to use is the question :)

[redstorm]

i copied your code and tried on my computer, just like what you said, table A just stands there still. quite a strange thing

[Platiz0]

the best fix ive found is this w/o using javascript cause i dont want javascript

its not what I want though cause its just a min-width type fix. works in IE & Firefox but just sucks.

<style type="text/css">
<!--
#banner {width:100%; min-width:800px;} /* for most modern browsers */
#prop {width:800px;} /* IE work around */
-->
</style>
then a div in whatever table you are using...
<td>
<div id="prop"><div id="banner"></div></div>
</td>

just sucks tho cause you only set it for certain width