www.webdeveloper.com
Results 1 to 8 of 8

Thread: How to expand a table's height to fill its parent table?

  1. #1
    Join Date
    Jan 2007
    Posts
    2

    Question How to expand a table's height to fill its parent table?

    Am new to web design; have spent some time on the web and in a book store trying to research this; apologize if this question has been asked before.

    Am designing a web site using HTML/CSS (via Joomla).

    I have an HTML table which in turn contains 3 tables, stacked vertically. The containing table is of a fixed height, as are the top two contained tables. I want to make it so the bottom contained table will automatically expand in height to fill the void between the two top contained tables and the bottom of the containing table. Is there a way of doing this? (I hope this question is clear!)

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    This might help you: http://apptools.com/examples/tableheight.php.
    Its approach is to set the height of the overall table, but I think you could apply some of this to the nested tables, also.
    Last edited by KDLA; 01-03-2007 at 10:58 PM. Reason: punctuation

  3. #3
    Join Date
    Jan 2007
    Posts
    2
    Thanks Miss Moderator -- this is exactly what I was looking for!

  4. #4
    Join Date
    Jan 2007
    Location
    Alexandria, Virginia
    Posts
    2

    Table not displayed at top of window

    The following defines a table I am using in a new window:

    <body>
    <table border=0 width="100%" align="center" valign="top">
    <tr>

    <td><img src="pics/paw.gif" alt="." width="28" height="28" border="0"><a class="main" href="http://www.wildliferescueleague.org/pdf/WRL Fall 2006.pdf" target="_blank">Rescue Report Fall 2006</a></td>
    <br><br>

    <td><img src="pics/paw.gif" alt="." width="28" height="28" border="0"><a class="main" href="http://www.wildliferescueleague.org/pdf/WRL Summer 2006.pdf" target="_blank">Rescue Report Summer 2006</a></td>
    <br><br>
    </tr>
    .......
    </table>
    </body>

    Everything displays just the way I want except that the window has two much 'white space' at the top. One must scroll down to see the first links defined by the above table. The 'href' links also work correctly.

    How can I eliminate this 'white space'?
    Last edited by HarryW; 01-04-2007 at 12:24 AM.

  5. #5
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    You've got two <br> tags outside the closing cell tag </td>. When you do that, it places the space at the top of the page, outside the table. Eliminate the <br> tags, and that should do it for you.
    Code:
    <body>
    <table border=0 width="100%" align="center" valign="top">
    <tr>
    
    <td><img src="pics/paw.gif" alt="." width="28" height="28" border="0"><a class="main" href="http://www.wildliferescueleague.org/pdf/WRL Fall 2006.pdf" target="_blank">Rescue Report Fall 2006</a></td>
    <br><br>
    
    <td><img src="pics/paw.gif" alt="." width="28" height="28" border="0"><a class="main" href="http://www.wildliferescueleague.org/pdf/WRL Summer 2006.pdf" target="_blank">Rescue Report Summer 2006</a></td>
    <br><br>
    </tr>
    .......
    </table>
    </body>
    KDLA

  6. #6
    Join Date
    Jan 2007
    Location
    Alexandria, Virginia
    Posts
    2

    Smile Thank you

    Works like a champ. I appreciate the quick response although I am embarrased that I did not analyze my HTML close enough to figure that out. At least I have learned a couple of things.

  7. #7
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Don't worry about it - it happens to all of us. I don't know how many times I've tried to locate a problem, staring at the coding for hours, and not seen an obvious misspelling or tag!!!

  8. #8
    Join Date
    Sep 2005
    Posts
    137
    Or a missing

    Code:
    ;

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles