在IE瀏覽器中的表格格式問題

Question

我遇到了div表格控制問題，我寫在IE中正確顯示。

我的「桌子」只是一系列看起來像一張桌子的div，在FF和Chrome中一切看起來不錯，但似乎無法讓我的「行」在IE中正確顯示。

它似乎將所有行都擠壓到表格的左側，然後包裹它們。我可以通過調整行div的寬度來調整它，但我想找到另一個解決方法，因爲這是一個控件，並且知道適用的寬度可能很困難。這裏是它正在做的一個屏幕截圖。

也只是注意到，當我最大化我的22英寸寬屏我的屏幕上正確地監視它行了一切。不知道那裏發生了什麼。

這裏是我的CSS，我認爲這些標題足夠說明問題。

.dataTable 
{ 
    border-style: solid; 
    border-width: .5px; 
    border-color: #dae2c1; 
    border-collapse: collapse; 
    font-family: PTSansCaptionBold, Arial, Sans-Serif; 
} 

.Table div 
{ 
    font-size: 12px; 
    color: #888; 
    margin: 0; 
    float: left; 
    overflow: hidden; 

} 

.HeaderRow div 
{ 
    border: 1px solid #f3f5eb; 
    padding: 5px 3px; 
    background-color: #bcc3a7; 
    color: #FFFFFF; 
    opacity: 0.7; 
    text-transform: uppercase; 
    -moz-user-select: none; 
    user-select: none; 
    cursor: pointer; 
    position: relative; 
} 

.DataRow 
{ 
    clear: both; 
} 

.DataRow div 
{ 
    border: 1px solid #000000; 
    border-color: #e7ecd7; 
    padding: 5px 3px; 
    min-height: 12px; 
} 

下面是一些HTML

<div class="HeaderRow"> 
<div style="width: 100px; text-align: left;"><span id="arrow"></span>DRAWING #</div> 
<div style="width: 100px; text-align: left;"><span id="arrow"></span>LOT #</div> 
<div style="width: 100px; text-align: left;"><span id="arrow"></span>Serial #</div> 
<div style="width: 100px; text-align: left;"><span id="arrow"></span>AS BUILT</div> 
<div style="width: 100px; text-align: left;"><span id="arrow"></span>AS DESIGN</div> 
<div style="width: 200px; text-align: left;"><span id="arrow"></span>DESCRIPTION</div> 
</div> 
<div class="DataRow"> 
<div style="width: 100px; text-align: left;">0102-10002</div> 
<div style="width: 100px; text-align: left;"> </div> 
<div style="width: 100px; text-align: left;">1004</div> 
<div style="width: 100px; text-align: left;">94</div> 
<div style="width: 100px; text-align: left;">9</div> 
<div style="width: 200px; text-align: left;">HUT (HARD UPPER TORSO ASSY)</div> 
</div>