td里面加div，内容超出后浮动到后面的td中
<html>
<body style="font:16px Arial;">
<style type="text/css">
.table {border-collapse: collapse;table-layout: fixed;font: normal 11px arial;}
.row {height:25px;}
.cell {
background-color:#ECF4FE;
font-family:Arial,Verdana,sans-serif;
font-size: 11px;
border-bottom-width: 1px;
border-bottom-color: #ECF4FE;
border-bottom-style: dotted;
border-top: none;
border-left: 1px solid #EC0000;
border-right: 1px solid #EC0000;
vertical-align: top;
padding-left: 3px 3px;
}
.cell .text {white-space:nowrap;position:absolute;height:25px;padding: 5px 0;}
</style>
<div style="width: 250px">
<table width="100%" class="table">
<tr class="row">
<td class="cell">
<div class="text">Text Text Text Text Text Text Text Text</div>
</td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
</table>
</div>
</body>
</html>
如题和上述代码，在ie7标准模式下。
情形一：
如果表格上面有 table-layout: fixed; 这个样式，上述代码在页面上显示的效果是
情形二：
如果表格上面没有 table-layout: fixed; 这个样式，上述代码在页面上显示的效果是
很显然这两种结果都不理想。
在我现在的需求里，限于总体设计的因素，table标签上的table-layout: fixed; 是必须要有的。但是我又需要把单元格里超出单元格的那些内容浮动显示在它后面的各个单元格里，不能像情形二里那样直接把第一个单元格拉宽。理想效果如下
问题：在IE8中显示的内容较靠下
