SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard simplecode's Avatar
    Join Date
    Jun 2006
    Posts
    1,129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question HTML Table Height

    PHP Code:
    <table width="100%" border="1" cellspacing="0" cellpadding="0">
      <
    tr>
        <
    td width="29%" height="100%">
        
        <
    table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0" bgcolor="#000000">
          <
    tr>
            <
    td>&nbsp;</td>
            <
    td>&nbsp;</td>
          </
    tr>
        </
    table>

        </
    td>
        <
    td width="71%">
        <
    br />
        <
    br />
        <
    br />
        <
    br />
        <
    br />
        <
    br />
        <
    br />
        <
    br />
        <
    br />
        <
    br />
        <
    br />
        <
    br />
        <
    br />
        <
    br /></td>
      </
    tr>
    </
    table

    Am trying to adjust the height of table as per td's height....
    if 2nd is expanding to any height i want ot adjust tables height which is in another td....
    Last edited by simplecode; Dec 22, 2006 at 16:43.

  2. #2
    SitePoint Zealot NinjaNoodles's Avatar
    Join Date
    Oct 2006
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You've lost me.

  3. #3
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    TD's ignore height in percentage unless the table itself is assigned a height - and because it's ignored, there's nothing for your inner table to scale itself to.

    If your website ends up in quirks mode (easiest way - don't use a doctype) you can get around this 'problem' by just assigning 'height=1&#37;' to the table, since in quirks mode height is treated as min-height.

    If you are using a non-quirks mode doctype on the other hand, I'm not aware of any 'magic bullet' to fix it and still have a dynamic height - though giving the outermost table a fixed height does still work... though be warned if the outer table goes fluid taller than the height it's assigned, the inner table will only remain as tall as the original 'fixed' height.

    Question - do you have to style the table itself, or could you 'cheat' and just style the wrapping TD to 'fake' it, the same way faux non-table columns work?

    Here's one that works - but if you put a doctype on it, it stops working (well, not ENTIRELY true, if you put the html 3.2 doctype on it theoretically.....)

    Code:
    <html><head>
    <title>Table Test</title>
    
    <style type="text/css">
    * {
      margin:0px;
      padding:0px;
    }
    
    table {
    	width:100%;
    	height:1%;
    	border:1px solid #000;
    	border-collapse:collapse;
    }
    
    table td {
    	vertical-align:top;
    }
    
    .twentynine {
    	width:29%;
    	height:100%;
    	overflow:hidden;
    }
    
    .twentynine table {
    	display:block;
    	width:100%;
    	height:100%;
    	background-color:#CCC;
    }
    
    </style>
    
    </head><body>
    <table>
      <tr>
        <td class="twentynine">
    	    <table>
    	      <tr>
    	        <td>&nbsp;</td>
    	        <td>&nbsp;</td>
    	      </tr>
    	    </table>
        </td>
        <td>
    	    <br />
    	    <br />
    	    <br />
    	    <br />
    	    <br />
    	    <br />
    	    <br />
    	    <br />
    	    <br />
        </td>
      </tr>
    </table>
    
    </body></html>
    I switched to CSS to make the HTML a touch cleaner.


Bookmarks

Posting Permissions

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