<td> height issue

Hi experts,

I've searched all over for an answer to this question, but all the answers appear to have been written several years ago and reference IE 6, and I'm hoping a better solution has been found since then. For my purposes, I only need to be compatible with IE 8 and up.

In the table below, Cells 1, 2, 3, 5, 6 and 7 are all set to specified heights; cell 4 is intended to expand as needed so that the table as a whole fills the entire page height. This table displays correctly in Firefox and Chrome, but in IE, cell 3 extends far beyond its specified height of 30px. How do I fix this?

Thanks!

<style type="text/css">
table {
	border-width: 2px;
	border-spacing: 0px;
	border-style: solid;
	border-color: black;
	border-collapse: separate;
	background-color: white;
}
 td {
	border-width: 2px;
	padding: 1px;
	border-style: solid;
	border-color: black;
	background-color: white;
	text-align:center;
}
</style>

<table cellpadding="3" cellspacing="3" style="table-layout:fixed; width: 100%; height: 100%;" ID="Table3">
    <tr>
        <td colspan="2" style="height: 30px;">Cell 1</td>
    </tr>
    <tr>
        <td rowspan="2" style="height: 305px;">
            Cell 2
        </td>
        <td style="height: 30px;">
            Cell 3
        </td>
    </tr>
    <tr>
        <td rowspan="2">
           Cell 4
        </td>
    </tr>
    <tr>
        <td style="height: 105px;">
            Cell 5
        </td>
    </tr>
    <tr style="height: 50px;">
        <td>
           Cell 6
        </td>
        <td>
            Cell 7
        </td>
    </tr>
</table>

Select allOpen in new window