html table not filling 100% of encapsulating td cell

Question

Hi,

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>

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

Answer 1

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?

Answer 2

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