防止表格單元格在IE 8中包裝內容

我試圖在HTML中創建表格視圖。如果表格太寬，則應該隱藏溢出的內容，但單元格的寬度不應該被自動壓縮。某些單元格包含多個項目，例如示例中的類爲「btn」的div。防止表格單元格在IE 8中包裝內容

以下代碼適用於Chrome，但在IE 8中，帶有div的單元格會被包裝爲兩行。

<html> 
<head> 
    <style> 
     #container { 
      width:100%; 
      overflow:hidden; 
      background-color:aqua; 
     } 
     .btn { 
      width:18px; 
      height:18px; 
      background-color:red; 
     } 
     .tbl td { 
      white-space:nowrap; 
     } 
     .tbl input { 
      float:left; 
     } 
     .tbl div { 
      float:left; 
     } 
    </style> 
</head> 
<body> 
    <div id='container' > 
     <table class='tbl'> 
      <tr> 
       <td>Item Name</td> 
       <td><input style='width:100px' /></td> 
       <td>Barcode</td> 
       <td class='td2' ><input style='width:80px' /> 
      </td> 
       <td>Item code</td> 
       <td><input style='width:50px' /></td> 
      </tr> 
      <tr> 
       <td>Units</td> 
       <td><input style='width:100px' /></td> 
       <td>Item type</td> 
       <td class='td2' ><input style='width:80px' /> 
       <div class='btn'></div> <!-- this is causing a wrap to 2 lines --> 
      </td> 
       <td>ID</td> 
       <td><input style='width:50px' /></td> 
      </tr> 
     </table>   
    </div> 
</body>

截圖在鉻：