Question

我有一个嵌套的表：

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

更确切地说：

一些风格信息：

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

布局：

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

原因是页面是动态填充的，内部表是插入数据循环中的。无论如何，问题是内表没有填充封装td单元的可用高度的100％。我已经将内部表格高度（通过css）设置为100％，封装表格以及身体标签等等。如果你看一下firefox和opera中的页面，它就是完美的，但IE似乎并没有遵循高度细节，只是让表大到足以显示数据，有没有人知道IE的黑客/修复，或者我可以纠正这个...？

Answer 1

正如问题描述的那样：td元素本身会自动拉伸到100％，但是（在IE中）由于某种原因，它的高度不会传递给它的子节点为100％。

解决方案非常简单：只需将'height：100％'添加到嵌套表的父级的td元素中。这样，当使用高度：100％时，100％高度将被传递给td的孩子;在他们身上。

它解决了IE中的问题，似乎没有在其他浏览器中引起任何问题（在新浏览器Chrome，Firefox和IE上测试过）。

注意：使用嵌套表将td的高度设置为100％可能会导致单元格扩展太多。因此，可能必须调整高度以补偿其他行的高度。使用CSS3，这可以通过计算（100％ - [其他行的高度]）

轻松实现 PS：我知道上面的问题真的很老了，但我在谷歌搜索一个类似的问题时偶然发现了这个问题，似乎没有（正确的）答案提供给这个问题。对于那些会像我一样找到这个页面的人来说，找到一个可能会有所帮助答案。

Answer 2

好的我没有测试任何东西，但看起来你没有将内部表高度设置为100％。您有一个类table.centeredT，但您没有在表上指定该类。您也没有在内部表本身上指定height: 100%。再给我几分钟，我会尝试在jsfiddle上实现这一点。

编辑：我刚刚发生的一件事 - 它不会导致问题但只是减少代码 - 是你可以使用col属性而不是顶部的额外行。我听说这不是100％支持，但我个人从未遇到任何问题。

编辑：好的我不知道......花了很多年的时间而没有到达任何地方。我个人在几个月内没有使用过桌子 - 我对div很好，浮动和清晰相似，我可以轻松地制作看起来像没有桌子的桌子。如果我必须以有意义的方式显示数据，那么我会使用一个表。这是用于显示数据，还是只能使用divs / float / clear？

显示

Answer 3

尝试设置填充：0px;在币头和内表上。

Answer 4

您需要具有应跨越100％高度的元素的固定高度。固定高度意味着您必须将它们设置为像素高度而不是百分比。使用类似代码查看此SO问题和解决方案：

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

html表没有填充100％的封装td单元格

4 个答案: