css – 如何在行中包含大图像时使IE 11尊重表中的列宽？

以下工作在Chrome(最新)和奇怪的过时的IE版本中运行良好 – 但在最新的IE版本(11)它似乎没有我想要的行为.

在Chrome(最新)和过时的IE版本中,第1列不会更改其宽度以适应第2列中的大图像,但在最新的IE版本(11)中它确实如何更正？

<table>
 <tr>
  <td class="header">
     Column 1
  </td>
  <td class="header">
     Column 2
  </td>
 </tr>
 <tr>
   <td class="body_twenty">
     <table>
        <tr>
           <td>
              Test...
           </td>
        </tr>
     </table>
  </td>
  <td class="body_eighty">
     <table>
        <tr>
           <td>
              Test...
           </td>
           <td>
              Test...
           </td>
        </tr>
     </table>
  </td>
  </tr>
  <tr>
  <td class="body_twenty">
     <table>
        <tr>
           <td>
              Test...
           </td>
        </tr>
        <tr>
           <td>
           </td>
        </tr>
        <tr>
           <td>
           </td>
        </tr>
     </table>
  </td>
  <td class="body_eighty">
     Test...
     <img src="http://www.psdgraphics.com/file/colorful-triangles-background.jpg">
  </td>
 </tr>
 <tr>
  <td class="footer">
  </td>
  <td class="footer">
  </td>
 </tr>
 </table>

见：https://jsfiddle.net/tLfur3xz/1/

添加此样式：

table {
  table-layout: fixed;
}

Updated Fiddle

当你使用fixed时：

Table and column widths are set by the widths of table and col
elements or by the width of the first row of cells.

MDN documentation