title: html table not filling 100% of encapsulating td cell
body: <p>I have a table nested as such:</p>
  
  <pre><code>&lt;table&gt;
  &lt;tr&gt;
     &lt;td&gt;
         &lt;table&gt;...
         &lt;/table&gt;
     &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>More precisely:</p>
  
  <p>some style info:</p>
  
  <pre><code>div.centered{
      text-align: center;
      height:100%; 
  }
  div.centered table.centeredT {
      margin: 0 auto; 
      text-align: left;
      max-width: 781px;
      overflow: hidden;
      height:100%; 
  }
  </code></pre>
  
  <p>Layout:</p>
  
  <pre><code>&lt;table style="height:100%; min-height:100%;" class="centeredT" border="1" cellpadding="0" cellspacing="0" width="781px" &gt;
      &lt;tr&gt;
          &lt;td style="vertical-align:top; padding-bottom:7px;padding-right:5px;width:33%;height:100%;"&gt;
              &lt;table style="table-layout:fixed;height:100%;min-height:100%;border:solid 1px black;" border="0" id="Table1" cellspacing="0" cellpadding="0" class="verdanaSmall" width="257px" &gt;
                  &lt;!--this first row is simply a spacer row because I am using table-layout:fixed attribute --&gt;
                  &lt;tr&gt;
                      &lt;td width="80px"&gt;&lt;/td&gt;
                      &lt;td width="175px"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr &gt;
                      &lt;td colspan="2" style="height:100%;"&gt;
                          &lt;table border="0" width="100%" cellspacing="0" cellpadding="0" style="border-top: solid 1px black; border-bottom: solid 1px black;"&gt;
                              &lt;tr&gt;
                                  &lt;td style="text-align: left; vertical-align: middle;"&gt; 1.) &lt;/td&gt;
                                  &lt;td align="center" height="20"&gt;
                                      &lt;a href="results.asp?pubid=31422&amp;date=10%2F11%2F2010&amp;ttype=eqq"target="_top"&gt;
                                          &lt;font face="Verdana" size="2" color="#22476C"&gt;&lt;b&gt; Abilene Reporter News &lt;/b&gt;&lt;/font&gt;
                                      &lt;/a&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td colspan="2" style="text-align: center;"&gt;&lt;font face="Verdana" size="1" color="#22476C"&gt; Monday, October 11, 2010 &lt;/font&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td align="center" colspan="2" height="100%" id="imagetd"&gt;
                          &lt;a href="../PDFView/PDFView.aspx?pgID=32065209&amp;adID=96332396&amp;ref=50" target="_blank"&gt;
                              &lt;img src="/pages/201010/11/31422/thumbs/A000300001H.gif" style="border: solid 1px black;" alt="" /&gt;
                          &lt;/a&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The reason for this is that the page is filled dynamically and the inner table is inserted inside a data loop.  Anyway, the question is that the inner table is not filling 100% of the available height of the encapsulating td cell.  I have set the inner table height, via css, to 100%, the encapsulating table, and also the body tag and so on up the chain.  If you look at the page in firefox and opera it lays out perfect but IE does not seem to be obeying the height specifics and just making the table big enough to display the data, does anybody know of a hack/fix for IE, or a way I can correct this..?</p>