6

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/

Stone
  • 343
  • 1
  • 5
  • 11

4 Answers4

19

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

Rick Hitchcock
  • 35,202
  • 5
  • 48
  • 79
4

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

Solution

GolezTrol
  • 114,394
  • 18
  • 182
  • 210
2

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.

Community
  • 1
  • 1
Bram Vanroy
  • 27,032
  • 24
  • 137
  • 239
  • 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. – GolezTrol Jul 05 '15 at 17:46
  • The table-layout method seems to work better when testing across IE past and present and Chrome (latest). But appreciate your response. – Stone Jul 05 '15 at 18:04
0

What I have found for MANY IE issues is this: You MUST add the following two lines in the <head>

<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

This solved several problems that took up much of my time to resolve.

garr1095
  • 9
  • 1