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

【问题标题】：html table not filling 100% of encapsulating td cellhtml 表格未填充 100% 的封装 td 单元格
【发布时间】：2013-08-18 19:37:49
【问题描述】：

我有一个这样嵌套的表格：

<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 的 hack/fix，还是有什么办法可以纠正这个..？

【问题讨论】：

muek，没用。
Pekka，页面有 1300 行长（没有外部导入），所以有点难。表格样式高度设置为 100%，其封装表格设置为 100% 高度，主体样式设置为 100% 高度...... 没有冲突的样式，没有任何地方设置表格的高度，然而它不适合封装 td 单元的高度。
@flavor404：只需发布一小部分代码示例。例如，一张表、一行、一个单元格、一个嵌套表等。 CSS也很有用。如果可以的话，请将我们指向一个 URL 以查看该页面。
希望这会有所帮助。该网站是安全的，所以我无法提供网址，抱歉。
好的。给我几分钟看看。

标签： html css internet-explorer

【解决方案1】：

正如问题所描述的：td 元素本身确实会自动拉伸到 100%，但是（在 IE 中）由于某种原因它的高度没有作为 100% 传递给它的子元素。

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

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

注意：使用嵌套表格将 td 的高度设置为 100% 可能会导致单元格展开过多。在这种情况下，可能必须调整高度以补偿其他行的高度。使用 CSS3，这可以通过 calc(100% - [height of other rows]) 轻松实现

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

【讨论】：

【解决方案2】：

尝试设置 padding:0px;在硬币和内表上。

【讨论】：

【解决方案3】：

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

编辑：我刚刚想到的一件事——这不会导致问题，只是稍微减少了代码——你可以使用col 属性而不是顶部的额外行。我听说这不是 100% 支持的，但我个人从来没有遇到过问题。

编辑：好吧，我不知道...花了很多时间在这上面，却没有得到任何结果。我个人已经好几个月没用过桌子了——我在 div、浮动和清晰等方面已经足够好了，我可以轻松地制作看起来像没有桌子的桌子。如果我必须以有意义的方式显示数据，那么我会使用表格。这是用来显示数据的，还是只用divs/float/clear就可以显示？

【讨论】：

我现在正试图用 div 来做这件事，但遇到了问题...... :) 此表用于显示数据，中间有一个图像，这是什么东西都扔掉了。跨度>
你进步很大吗？我要去看电影，然后我会回到工作模式……如果你还卡住了，我会帮你的。
ClarkeyBoy，我尝试用 div 做同样的事情，但仍然没有正确... stackoverflow.com/questions/3919888/…>

【解决方案4】：

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

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

【讨论】：