html表格未填充100%的封装td单元

我有一个这样嵌套的表：

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

布局：

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

1.) 
2010年10月11日，星期一

---

这是因为页面是动态填充的，并且内部表插入到数据循环中。无论如何，问题是内部表没有填满封装td单元可用高度的100%。我已经通过css将内部表格的高度设置为100%，包括封装表格和body标签等等。如果你看看firefox和opera中的页面，它的布局非常完美，但是IE似乎没有遵守高度的规定，只是把桌子弄得足够大来显示数据，有人知道IE有什么改进吗，或者我可以纠正这一点。

好的，我没有测试任何东西，但看起来你没有将内桌高度设置为100%。您有一个class

表。centeredT

，但尚未在表上指定该类。您也没有在内部表格本身上指定高度：100%。再给我几分钟，我将尝试在JSFIDLE上实现这一点

编辑：我刚刚想到的一件事是，您可以使用

col

属性，而不是顶部的额外一行，这不会导致问题，但只是减少了一点代码。我听说这不是100%支持，但我个人从来没有遇到过问题

---

编辑：好的，我不知道。。。在这上面花了很长时间，却一事无成。我个人已经好几个月没用过桌子了——我在div、float和clear方面都很在行，我可以很容易地制作出没有桌子的桌子。如果我必须以有意义的方式显示数据，那么我将使用表。这是用来显示数据的，还是只使用divs/float/clear来显示？

好的，我没有测试过任何东西，但看起来你没有将内表高度设置为100%。您有一个class

表。centeredT

，但尚未在表上指定该类。您也没有在内部表格本身上指定高度：100%。再给我几分钟，我将尝试在JSFIDLE上实现这一点

编辑：我刚刚想到的一件事是，您可以使用

col

属性，而不是顶部的额外一行，这不会导致问题，但只是减少了一点代码。我听说这不是100%支持，但我个人从来没有遇到过问题

---

编辑：好的，我不知道。。。在这上面花了很长时间，却一事无成。我个人已经好几个月没用过桌子了——我在div、float和clear方面都很在行，我可以很容易地制作出没有桌子的桌子。如果我必须以有意义的方式显示数据，那么我将使用表。这是用于显示数据，还是仅使用divs/float/clear即可显示？

尝试设置填充：0px；在同机和内桌上。

尝试设置填充：0px；在同时机和内表上。

您需要有固定的元素高度，这些元素的跨距应为100%高度。固定高度意味着您必须将其设置为像素高度，而不是百分比。请参见类似代码的SO问题和解决方案：

---

您需要有固定的元素高度，这些元素的跨距应为100%高度。固定高度意味着您必须将其设置为像素高度，而不是百分比。请参见类似代码的SO问题和解决方案：

---

如问题所述：td元素本身会自动拉伸到100%，但（在IE中）由于某些原因，其高度不会作为100%传递给其子元素

解决方案非常简单：只需将“height:100%”添加到作为嵌套表父级的td元素中。这样，当使用身高时，100%的身高将传递给td的孩子：100%；在他们身上

它修复了IE中的问题，并且似乎不会在其他浏览器中造成任何问题（在新浏览器Chrome、Firefox和IE上测试）

注意：使用嵌套表格将td的高度设置为100%可能会导致单元格膨胀过大。因此，可能必须调整高度以补偿其他行的高度。对于CSS3，这可以通过calc轻松实现（100%-[其他行的高度]）

PS：我知道上面的问题真的很老了，但我在谷歌搜索一个类似的问题时偶然发现了这个问题，似乎没有（正确的）答案。对于其他人谁会找到这个网页就像我做的，它可能是有帮助的，找到一个

---

答案。

如问题所述：td元素本身会自动拉伸到100%，但（在IE中）由于某些原因，其高度不会作为100%传递给其子元素

解决方案非常简单：只需将“height:100%”添加到作为嵌套表父级的td元素中。这样，当使用身高时，100%的身高将传递给td的孩子：100%；在他们身上

它修复了IE中的问题，并且似乎不会在其他浏览器中造成任何问题（在新浏览器Chrome、Firefox和IE上测试）

注意：使用嵌套表格将td的高度设置为100%可能会导致单元格膨胀过大。因此，可能必须调整高度以补偿其他行的高度。对于CSS3，这可以通过calc轻松实现（100%-[其他行的高度]）

PS：我知道上面的问题很老了，但我不知道

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