Container div在Internet Explorer 11中無法正確調整大小

Question

在Chrome和Firefox中，我有一個div內的表格，其滾動條可以正常工作。但是，當我在Internet Explorer 11中打開它時，發現div內的表佔用了屏幕的整個高度，並且滾動條不起作用。

我的div設置是這樣的：

<div id="wrapper"> 
    <div class="main-body-full"> 
     <div class="table-container">    
     <table> 
      <thead> 
      <tr> 
       <th rowspan="2">COLUMN 1</th> 
       <th rowspan="2">COLUMN 2</th> 
       <th rowspan="2">COLUMN 3</th> 
      </tr> 
      </thead> 
      <tbody id="drawingList"> 
      /*Filled in with data*/ 
      </tbody> 
      </table> 
     </div> 
    </div> 
    </div> 

和相關的CSS我使用：

#wrapper{ 
    /*height: calc(100% - 95px);*/ 
    overflow-y: hidden; 
} 

form{ 
    margin: 0; 
    height: 100px; 
} 

th, td{ 
    overflow:hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis;  
} 
.main-body-full table { 
    width: 100%; 
    height: 85%; 
    overflow-y: scroll; 
} 

/*Adding scrollbar to table body*/ 
.main-body-full tbody { 
    overflow-x: hidden; 
    width: 100%; 
} 

.table-container { 
    height:85%; 
    overflow-y: scroll; 
} 

An unsolved SO question has a jsFiddle showcasing the exact issue I'm having.

有什麼我錯過這裏？或者這是否需要不同的表結構？

Answer 1

與ie的問題是，它的表格單元格將始終展開到其內容的高度（處理高度像最小高度）。爲了克服這一切你需要的是一個額外的div絕對定位與溢出汽車，一個相對的div是TD的100％高度內：

<table id="Table1" style="HEIGHT: 240px;" cellspacing="1" cellpadding="1" width="100%" border="1"> 
 
    <tr> 
 

 
    <td style=""> 
 
     <div style="width:100%; height:100%; position:relative;"> 
 
     <div style="top:0; left:0; right:0; bottom:0; overflow:scroll;position:absolute;"> 
 
      <table border="1" cellspacing="0" cellpadding="0" width="100%" rules="all" style="table-layout:fixed;"> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span>Test</span></td> 
 
      </tr> 
 
      </table> 
 
     </div> 
 

 
     </div> 
 
    </td> 
 

 
    </tr> 
 
</TABLE>

PS - 我希望這是一個電子郵件模板，因爲使用表格進行佈局這樣做不好，你應該使用div和css