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

Question

以下内容在 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/

Answer 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