TD height expands on dynamic content in Internet Explorer

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

So the first two cells have to be only 5px tall? On FF it works if you remove the height:100% from the third td.

EDIT: OK form me it kinda works if instead of 100% i write height:640px on the last div. Since you know that the total height of the table is 650px then it shouldn't be a problem.

Answer 2

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 ?

Answer 3

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

Further do this only for IE as remove the height:100% works in other browsers