Question

首先;我在这里和网上搜索过这个，但找不到合适的解决方案。我现在正在解决这个问题两天，所以我不得不问。

我遇到了以下问题：

    <table width="650px" border="1" >
    <tr>
        <td style="height :5px">stay as you are</td>
        <td rowspan="3" id="content">
            empty
        </td>
    </tr>
    <tr>
        <td style="height :5px">please dont expand</td>
    </tr>
    <tr>
        <td style="background: red;height : 100%;">&nbsp;</td>
    </tr>
</table>
<input type="button" value="do" onclick="dontExpand()">
<script language="Javascript">
    function dontExpand() {
        var html = "";
        for (var i = 0; i < 100; ++i)
            html += "lorem ipsum<br>";
        document.getElementById("content").innerHTML = html;
    }
</script>

JSFiddle example of the problem, works only in Chrome

在Javascript动态修改内容后，中间的左上角和左上角正在扩展。

我想它确实与DocType有关，但我不是专家。

有没有办法让Internet Explorer和Firefox只展开左下角的单元格;上面的其他两个单元格应保持不变。

请帮助。

Answer 1

所以前两个细胞必须只有5px高？在FF上，如果你从第三个td移除高度：100％，它就有效。

编辑：好的形成我有点工作如果不是100％我写高度：最后一个div 640px。既然你知道表的总高度是650px那么它应该不是问题。

Answer 2

在这看同样的问题：IE setting row height not working when using rowspan

我想一个解决方案是在根据添加内容后的总高度更新内容后更改最后一个表格的高度 - 10 px？

Answer 3

var height = document.getElementById("content").offsetHeight; // to determine the content height.
table.style.height = height + 10 + "px";

此外，仅针对IE删除高度：100％适用于其他浏览器

TD高度扩展了Internet Explorer中的动态内容

3 个答案: