471,852 Members | 1,175 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,852 software developers and data experts.

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 4555
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
NeoPa
reply views Thread by NeoPa | last post: by
reply views Thread by YellowAndGreen | last post: by
aboka
reply views Thread by aboka | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.