By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
428,853 Members | 2,246 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 428,853 IT Pros & Developers. It's quick & easy.

Table which resizes horizontally and vertically with the browser window

P: 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
Share this Question
Share on Google+
2 Replies


Expert 100+
P: 1,892
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

P: 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.