Css IE8中嵌入TD的表格中的垂直对齐图像

在IE8中，当TD中嵌入表格时，图像的垂直对齐不起作用。这在所有浏览器中都可以正常工作

             <table cellpadding="1" cellspacing="1">
                <tr>
                    <td><div style="border: #999999 1px Solid; background-color: #D0D7E0; color:black; vertical-align:middle">&nbsp;<img src="images/calendar/redflag.gif" border="none" style="vertical-align:middle" alt="Scheduling" /><span style="">&nbsp;Scheduling&nbsp;Rule&nbsp;</span></div></td>
                    <td><div style="border: #999999 1px Solid; background-color: #E0DFD0; color:black; vertical-align:middle">&nbsp;<img src="images/eventtype_conference.gif" border="none" style="vertical-align:middle;" alt="Conference" /><span style="">Conference&nbsp;</span></div></td>
                    <td><div style="border: #999999 1px Solid; background-color: #E0D3D0; color:black; vertical-align:middle">&nbsp;<img src="images/eventtype_exercise.gif" border="none" style="vertical-align:middle" alt="Exercise" /><span style="">Exercise&nbsp;</span></div></td>
                    <td><div style="border: #999999 1px Solid; background-color: #E0D3D0; color:black; vertical-align:middle">&nbsp;<img src="images/eventtype_training.gif" border="none" style="vertical-align:middle" alt="Training" /><span style="">Training&nbsp;Event&nbsp;</span></div></td>
                    <td><div style="border: #999999 1px Solid; background-color: #E0D3D0; color:black; vertical-align:middle">&nbsp;<img src="images/eventtype_other.gif" border="none" style="vertical-align:middle" alt="Other" /><span style="">Other&nbsp;Event&nbsp;</span></div></td>
                </tr>
            </table>  

调度规则
会议
运动
培训活动
其他事件

但是如果我把它放在一个表td中，那么图像旁边的文本将在图像下呈现，而不是在IE 8中的图像旁边

<table border="0" cellpadding="2" cellspacing="0" width="100%">
    <tr>
        <td id="td1" width="5%">&nbsp;</td>
        <td id="td2" align="center" width="30%">    
             <table cellpadding="1" cellspacing="1">
                <tr>
                    <td><div style="border: #999999 1px Solid; background-color: #D0D7E0; color:black; vertical-align:middle">&nbsp;<img src="images/calendar/redflag.gif" border="none" style="vertical-align:middle" alt="Scheduling" /><span style="">&nbsp;Scheduling&nbsp;Rule&nbsp;</span></div></td>
                    <td><div style="border: #999999 1px Solid; background-color: #E0DFD0; color:black; vertical-align:middle">&nbsp;<img src="images/eventtype_conference.gif" border="none" style="vertical-align:middle;" alt="Conference" /><span style="">Conference&nbsp;</span></div></td>
                    <td><div style="border: #999999 1px Solid; background-color: #E0D3D0; color:black; vertical-align:middle">&nbsp;<img src="images/eventtype_exercise.gif" border="none" style="vertical-align:middle" alt="Exercise" /><span style="">Exercise&nbsp;</span></div></td>
                    <td><div style="border: #999999 1px Solid; background-color: #E0D3D0; color:black; vertical-align:middle">&nbsp;<img src="images/eventtype_training.gif" border="none" style="vertical-align:middle" alt="Training" /><span style="">Training&nbsp;Event&nbsp;</span></div></td>
                    <td><div style="border: #999999 1px Solid; background-color: #E0D3D0; color:black; vertical-align:middle">&nbsp;<img src="images/eventtype_other.gif" border="none" style="vertical-align:middle" alt="Other" /><span style="">Other&nbsp;Event&nbsp;</span></div></td>
                </tr>
            </table>       
        </td>
        <td id="td3" align="center" width="30%">&nbsp;</td>
        <td id="td4" width="30%">&nbsp;</td>
        <td id="td5" width="5%">&nbsp;</td>
    </tr>
</table>  

调度规则
会议
运动
培训活动
其他事件

---

在包括IE7在内的所有其他浏览器中都可以正常工作。关于如何在IE8中解决这个问题有什么想法吗？

添加

空白：nowrap到嵌套表

<table border="0" cellpadding="2" cellspacing="0" width="70%">
    <tr>
        <td id="td1" width="5%">&nbsp;</td>
        <td id="td2" align="center" width="30%">    
             <table cellpadding="1" cellspacing="1" style="white-space: nowrap">