MehmetGunacti MehmetGunacti - 1 month ago 8
HTML Question

TD height expands on dynamic content in Internet Explorer

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

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 ?

Comments