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/

Solution 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

Solution 2

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

Solution

Solution 3

Change max-width: 100% to width: 100% for the img element.

https://jsfiddle.net/tLfur3xz/3/

For more information, see this question.

If you specify table-layout: fixed; in the table css it works.

There seems to be some contradictory terminology in the standard regarding table layouts. In particular, table-layout: auto; says this:

The column width is set by the widest unbreakable content in the cells

The column width is set by the widest unbreakable content in the cells Since the images content is unbreakable, it sets the width of the cell to the size of the content. The max-width seems to be overriden by it.

However, in this case I see no difference between using max-width and width on the img element, so simply setting the width seems the better option to me.

Comments

[GolezTrol]

Funny, I was about to link to the same question, but the explanation given there, doesn't suggest to use width: 100% but table-layout: fixed, like @RickHitchcock suggests.

[Stone]

The table-layout method seems to work better when testing across IE past and present and Chrome (latest). But appreciate your response.

[Dave]

can you explain what this does?