469,609 Members | 2,043 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,609 developers. It's quick & easy.

Table which resizes horizontally and vertically with the browser window

4
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:


Expand|Select|Wrap|Line Numbers
  1. <table border="0" width="100%" height="100%">
  2.  <tr>
  3.    <td height="100%">
  4.       <div class="divScroll">
  5.          <table id="myTable" cellspacing="1" class="gridTable" width="100%" height="100%">
  6.             tr td here....
  7.          </table>
  8.       </div>   
  9.    </td>
  10.  </tr>
  11. </table>
  12.  
  13. .divScroll {
  14.         position:static; 
  15.         height:100%; 
  16.         z-index:1; 
  17.         overflow:scroll     
  18. }
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
Dec 15 '06 #1
2 4433
AricC
1,892 Expert 1GB
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.
Dec 15 '06 #2
sachjn
4
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
Dec 18 '06 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by Chris McGarry | last post: by
7 posts views Thread by Arthur Dent | last post: by
9 posts views Thread by PeteCresswell | last post: by
16 posts views Thread by Charles A. Landemaine | last post: by
3 posts views Thread by iamconfused | last post: by
reply views Thread by Solution2021 | last post: by
reply views Thread by devrayhaan | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.