Table which resizes horizontally and vertically with the browser window

[sachjn]

Hi,

I need to have a table along with other UI items in page which resizes horizontally and vertically with the browser window. That means table should accoupy the remaining available space in the browser window and should display horizontal and vertical scroll bars if content of table is more than available width & height.

I can do similer to this by enclosing table in a <DIV> with style as : overflow:auto; height:200px etc.
But things is I don't want to hardcode the height size here in style. Height should be automatically adjusted in the browser.

I did something else as below:

<table border="0" width="100%" height="100%">
 <tr>
   <td height="100%">
      <div class="divScroll">
         <table id="myTable" cellspacing="1" class="gridTable" width="100%" height="100%">
            tr td here....
         </table>
      </div>   
   </td>
 </tr>
</table>
 
.divScroll {
        position:static; 
        height:100%; 
        z-index:1; 
        overflow:scroll     
}

But here I don't get DIV horizontal scroll bar infact I got window horizontal scroll bar though I get DIV vertical scroll bar.

Any help..code snippet is highly appericiated.

TIA,Sachin

[AricC]

Try
[html]
<table style="height: auto;width: auto;etc.." cellspacing="1"><tr><td>etc..</table>
[/html] or post a link I'm not really sure what else your looking to do also you may not need position: static that is usually if your trying to override previously placed positioning.

[sachjn]

Try
[html]
<table style="height: auto;width: auto;etc.." cellspacing="1"><tr><td>etc..</table>
[/html] or post a link I'm not really sure what else your looking to do also you may not need position: static that is usually if your trying to override previously placed positioning.

Thanks for reply. Please bear with me as I am not an expert in HTML/CSS..:)

I'll put my question other way, please propose any solution:

I need a table in a DIV tag so that I can get horizontal and vertical scrolling for DIV if table content width/height is more than the available space in the page. It works all fine if I specify DIV width/height in px. But I don't want to hard code the size (Height/Width). As I said earlier somehow I could achieve this for height but for width I am unable to do it. I always end up in page horizontal scroll bar which I don't want. I have some 30 odd columns in the table.

TIA,Sachin