Internet Explorer 11でコンテナdivのサイズが正しく調整されない

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

問題は、テーブルのセルが常にコンテンツの高さ（最小高さのような高さを扱う）まで拡大することです。 - 私は願っています

<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：これを乗り越えるためには、あなたが必要とするすべては、TDの100％の高さである相対divの内側に、絶対にオーバーフロー自動で配置されている余分なdiv要素でありますこれはレイアウト用のテーブルを使用する電子メールテンプレートです。このように良くない場合は、divsとcssを使用する必要があります