Question

First; I’ve searched for this here and on the net, but couldn’t find a working solution. I’m working on this problem literally for two days now, so I have to ask.

I’ve following problem :

    <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

The upper left and the left cell in the middle are expanding after the content dynamically gets modified by Javascript.

I guess it does have something to do with the DocTypes, but I’m no expert.

Is there a way of making Internet Explorer and Firefox to only expand the lower left cell; the other two cells above should stay as they are.

Need help please.

Answer 1

Look here same problem: IE setting row height not working when using rowspan

I guess one solution will be to change teh height of the last table col after you update the content based on the total height after adding content – 10 px ?