How to make IE 11 honour columns widths in tables when containing large images in rows?

Question

The below works fine in Chrome (latest) and strangely in outdated IE versions - but in the latest IE version (11) it does not seem to behave as I would like.

In Chrome (latest) and outdated IE versions Column 1 does not change its width to accommodate the large image in Column 2, but in the latest IE version (11) it does - how to correct this?

<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>

See: https://jsfiddle.net/tLfur3xz/1/

Answer 1

Add this style:

table {
  table-layout: fixed;
}

Updated Fiddle

When you use 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

Answer 2

It works if I give the image a width too by adding img { width: 100% }.

Solution