How to make table rows/cells have the same fixed height without inner div in it?

Question

I'm trying to make some kind of "menu", but my menu items have too large heights in IE. Tested it on chrome, firefox and safari and it's working fine. What's wrong with my code? Please help. I just want them to be "fixed" 2em in height, is it possible in ie? And I wonder, is it an error in my page or just an IE bug?

window.onload=init;
window.onpageshow=init;
function init()
{
    var main=document.getElementById("mainview");
    var str=String.fromCharCode(Math.round( Math.random()*(90-65))+65);
    var chr;
    for(var i=0;i<20000;i++)
    {
        chr=String.fromCharCode(Math.round(Math.random()*(122-97))+97);
        if(chr!="<") str=str+chr;
        if(Math.random()<0.02) 
        {  chr=". "+String.fromCharCode(Math.round(Math.random()*(90-65))+65);
        }
        if(Math.random()<0.2) 
        {  str+=" ";
        }
        str+=chr;
    }
    main.innerHTML=str;
}

table
{    width: 100%;
    border-collapse: collapse;
    border-spacing: 0px;
    padding: 0;
    background-color: #fff;
    table-layout: fixed;
}
tr.first
{
    background-color: #000;
    height: 2em;
}
tr.space
{
    height: 1em;
}
td.lmargin
{
    width: 3em;
}
td.label
{
    width: 10em;
    height: 4em;
    background-color: #c30425;
}
td.menu
{
    padding-left: 2em;
    vertical-align: middle;
    height: 2em;    
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}
td.dummy
{
    height: auto;
}
td#mainview
{
    padding-left: 2em;
}

<table>
    <tr class="first">
        <td class="lmargin">
        </td>
        <td rowspan="2" class="label">
        </td>
        <td>
        </td>
    </tr>
    <tr>
        <td class="lmargin">
        </td>
        <td>
        </td>
    </tr>
    <tr class="space">
        <td class="lmargin">
        </td>
        <td>
        </td>
        <td>
        </td>
    </tr>
    <tr>
        <td class="lmargin">
        </td>
        <td class="menu">
            Menu item 1
        </td>
        <td rowspan="6" id="mainview">
        </td>
    </tr>
    <tr>
        <td class="lmargin">
        </td>
        <td class="menu">
            Menu item 2
        </td>
    </tr>
    <tr>
        <td class="lmargin">
        </td>
        <td class="menu">
            Menu item 3
        </td>
    </tr>
    <tr>
        <td class="lmargin">
        </td>
        <td class="menu">
            Menu item 4
        </td>
    </tr>
    <tr>
        <td class="lmargin">
        </td>
        <td class="menu">
            Menu item 5
        </td>
    </tr>
    <tr>
        <td class="lmargin">
        </td>
        <td class="dummy">
        </td>
    </tr>
</table>

Answer 1

Update: found the reason

https://support.microsoft.com/en-us/kb/2312750

The ROWSPAN property is disabled in Internet Explorer 8 if a webpage contains a tag in a table cell

It seems IE does not allow right cell to be larger than the left cell. Open developer console on IE (press F12) change

<td id="mainview" rowspan="6">

to

<td id="mainview" rowspan="1">

and see the differences.