javascript - TD height expands on dynamic content in Internet Explorer -

javascript - TD height expands on dynamic content in Internet Explorer -

first; i've searched here , on net, couldn't find working solution. i'm working on problem literally 2 days now, have ask.

i've next problem :

<table width="650px" border="1" > <tr> <td style="height :5px">stay 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 = ""; (var = 0; < 100; ++i) html += "lorem ipsum<br>"; document.getelementbyid("content").innerhtml = html; } </script>

jsfiddle illustration of problem, works in chrome

the upper left , left cell in middle expanding after content dynamically gets modified javascript.

i guess have doctypes, i'm no expert.

is there way of making net explorer , firefox expand lower left cell; other 2 cells above should remain are.

need help please.

look here same problem: ie setting row height not working when using rowspan

i guess 1 solution alter teh height of lastly table col after update content based on total height after adding content - 10 px ?

javascript html table height html-table