html table not filling 100% of encapsulating td cell

I have a table nested as such:

<table>
<tr>
   <td>
       <table>...
       </table>
   </td>
</tr>
</table>

More precisely:

some style info:

div.centered{
    text-align: center;
    height:100%; 
}
div.centered table.centeredT {
    margin: 0 auto; 
    text-align: left;
    max-width: 781px;
    overflow: hidden;
    height:100%; 
}

Layout:

<table style="height:100%; min-height:100%;" class="centeredT" border="1" cellpadding="0" cellspacing="0" width="781px" >
    <tr>
        <td style="vertical-align:top; padding-bottom:7px;padding-right:5px;width:33%;height:100%;">
            <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" >
                <!--this first row is simply a spacer row because I am using table-layout:fixed attribute -->
                <tr>
                    <td width="80px"></td>
                    <td width="175px"></td>
                </tr>
                <tr >
                    <td colspan="2" style="height:100%;">
                        <table border="0" width="100%" cellspacing="0" cellpadding="0" style="border-top: solid 1px black; border-bottom: solid 1px black;">
                            <tr>
                                <td style="text-align: left; vertical-align: middle;"> 1.) </td>
                                <td align="center" height="20">
                                    <a href="results.asp?pubid=31422&date=10%2F11%2F2010&ttype=eqq"target="_top">
         开发者_开发知识库                               <font face="Verdana" size="2" color="#22476C"><b> Abilene Reporter News </b></font>
                                    </a>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align: center;"><font face="Verdana" size="1" color="#22476C"> Monday, October 11, 2010 </font></td>
                </tr>
                <tr>
                    <td align="center" colspan="2" height="100%" id="imagetd">
                        <a href="../PDFView/PDFView.aspx?pgID=32065209&adID=96332396&ref=50" target="_blank">
                            <img src="/pages/201010/11/31422/thumbs/A000300001H.gif" style="border: solid 1px black;" alt="" />
                        </a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

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..?

---

As the problem describes: the td-element itself does automatically stretch to 100%, but (in IE) for some reason its height is not passed to its children as 100%.

The solution is quite simple: just add 'height: 100%' to the td-element that is parent of the nested table. This way 100% height will be passed to the td's children when using height: 100%; on them.

It fixes the problem in IE and doesn't seem to cause any problems in other browsers (tested on new browsers Chrome, Firefox and IE).

NOTE: setting the td's height to 100% with an nested table may cause the cell to expand too much. In that cause the height may have to be adjusted to compensate the height of the other rows. With CSS3 this can be easiliy achieved with calc(100% - [height of other rows])

PS: I'm aware that the above question is really old, but I stumbled upon this while googling for a simular problem and it seems no (correct) answer has been provided to this one. For others who will find this page just like I did, it might be helpfull to find an answer.

---

Try set padding:0px; on cointaner and inner table.

---

Ok I havent tested anything but it doesnt look like you have set the inner table height to 100%. You have a class table.centeredT but you have not specified the class on the table. Nor have you specified height: 100% on the inner table itself. Give me a few more minutes and I will try to achieve this on jsfiddle.

Edit: One thing which did just occur to me - which wont be causing the problem but just decreases the code a bit - is that you could use the col attribute instead of an extra row at the top. I have heard that this isnt 100% supported, but I have never had a problem with it personally.

Edit: Ok I have no idea... spent ages on this and not getting anywhere. I personally havent used tables in months - I am good enough at divs, float and clear and alike that I can easily make what looks like a table without a table. If I had to display data in a meaningful way then I would use a table. Is this for displaying data, or can it be displayed just using divs / float / clear?

---

You need to have fixed heights of the elements that should be spanned to 100% height. Fixed heights means you'll have to set them in pixel height instead of percentage. See this SO question and solution with similar code:

Iframe { height:70%;} not working in IE 8 and Firefox