title: IE10 table-layout:fixed broken if colspan is used
body: <p>The following HTML renders perfectly in all common browsers including IE7-9 but fails in IE10. Even when running IE10 in compatibility mode, it fails.</p>
  
  <pre><code>&lt;html&gt;
      &lt;body&gt;
          &lt;table style="table-layout:fixed;width:500px"&gt;
          &lt;colgroup&gt;
              &lt;col style="width:100px" &gt;&lt;/col&gt;
              &lt;col &gt;&lt;/col&gt;
              &lt;col style="width:100px" &gt;&lt;/col&gt;
              &lt;col &gt;&lt;/col&gt;
          &lt;/colgroup&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td colspan="2"&gt;
                      &lt;div style="background:red;"&gt; red &lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td colspan="2"&gt;
                      &lt;div style="background:green;"&gt; green &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>While in all other browsers the 2 cells are equal in size, on IE10 (at least when running on Windows7) the first cell is wider than the second.</p>
  
  <p>This HTML in IE 9/Windows 7:</p>
  
  <p><img src="https://i.stack.imgur.com/UEe9S.png" alt="In IE 9"></p>
  
  <p>Same HTML in IE 10/Windows 7:</p>
  
  <p><img src="https://i.stack.imgur.com/kvNxn.png" alt="In IE 10"></p>
  
  <p>Testpage: <a href="http://www.dinkypage.com/167605" rel="nofollow noreferrer">http://www.dinkypage.com/167605</a></p>
  
  <p>Reported Bug: <a href="https://connect.microsoft.com/IE/feedback/details/781009/ie-10-fails-to-render-tables-width-fixed-layout-correctly" rel="nofollow noreferrer">https://connect.microsoft.com/IE/feedback/details/781009/ie-10-fails-to-render-tables-width-fixed-layout-correctly</a></p>
  
  <p>Does anyone know solution/workaround for this problem?</p>
  
  <p>UPDATE: I asked Microsoft to re-open my reported bug because it's a violation of the w3c standard. The answer is: </p>
  
  <blockquote>
    <p>"The issue you are reporting is by design. Internet Explorer only uses the first set of TD tags to set the width for a column.".</p>
  </blockquote>
  
  <p>The w3c standard (<a href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" rel="nofollow noreferrer">http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout</a>) says:</p>
  
  <blockquote>
    <p>In the fixed table layout algorithm, the width of each column is determined as follows:</p>
    
    <ol>
    <li>A column element with a value other than 'auto' for the 'width' property sets the width for that column.</li>
    <li>Otherwise, a cell in the first row with a value other than 'auto' for the 'width' property determines the width for that column. If the cell spans more than one column, the width is divided over the columns.</li>
    <li>Any remaining columns equally divide the remaining horizontal table space (minus borders or cell spacing).</li>
    </ol>
  </blockquote>
  
  <p>That means, this function is broken by design in IE 10. I recommend to use a different browser or stay with IE 9...</p>