0

第一的; 我已经在这里和网上搜索过这个，但找不到有效的解决方案。我现在正在研究这个问题两天，所以我不得不问。

我有以下问题：

    <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 示例，仅适用于 Chrome

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

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

有没有办法让 Internet Explorer 和 Firefox 只扩展左下角的单元格；上面的其他两个单元格应该保持原样。

请需要帮助。

4

3 回答 3

0

所以前两个单元格必须只有 5px 高？如果您从第三个 td 中删除 height:100%，则在 FF 上它可以工作。

编辑：好吧，如果我在最后一个 div 上写 height:640px 而不是 100%，那么它有点工作。既然您知道表格的总高度是 650px，那么这应该不是问题。

于 2013-02-06T09:03:53.857 回答
0

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

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

于 2013-02-06T09:12:45.377 回答
0 
var height = document.getElementById("content").offsetHeight; // to determine the content height.
table.style.height = height + 10 + "px";

进一步仅对 IE 执行此操作，因为删除高度：100% 在其他浏览器中有效

于 2013-02-06T11:02:07.617 回答