adjusting table size with browser window size

How do you get a tables' height to change in real-time when a user adjusts the browser window size horizontally???

For instance... I have a table with the width fixed to 100% and the height fixed to 25%. Obviously, in HTML, the table width will change when the browser width is changed and the table height will change when the browser height is changed...which is all well and good. BUT, if the user leaves the browser height stationary and only resizes the browser width(squeezes it), the table height will stay the same. I need it to change.

Although my knowledge is limited, it seems well within the scope of JavaScript.

I searched the forum/web with no success. Thanks for any help in advance!

BUT, if the user leaves the browser height stationary and modifies the width(squeezes it) of the browser, the table height will stay the same. Therein lies the problem.

What's the problem with that? That's the correct and expected behavior.

Glenn,
If you read the post in its entirety, it should make sense. But, to be on the safe side, I changed some grammar in the post so that it might be clearer...
:)

What I meant was if you set the table height to 100% and you resize the browser's width without resizing its height, then naturally the height of the table won't change. I was just pointing out that it is the expected behavior and if you need to change that natural behavior, then you need to script it.

Try setting dynamically the table's width and height

<script>
function setUp(){
document.getElementById('tab').style.width=document.body.clientWidth;
}
document.getElementById('tab').style.height=document.body.clientHeight/4;
}

window.onload=setUp;
window.onresize=setUp;
</script>

....

and in body

<table id="tab">
...

Thanks KOR !!

I tried the code...at first nothing, then noticed one too many brackets in the syntax. Took it out and bam! Then I just rearranged your code a bit to complete the solution to the above stated problem. So now the table keeps the same aspect ratio asigned.

<script>
function setUp(){
document.getElementById('tab').style.height=document.body.clientWidth/6.4;
}

window.onload=setUp;
window.onresize=setUp;
</script>

......

<table id="tab" width="100%" border="1" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>The table keeps the same aspect ratio!</td>
</tr>
</table>


Again, thanks for the help !