title: colspan messes with fixed width table
body: <p>I want a fixed-width table with 1 small and 2 large columns like so:</p>
  
  <pre><code>|..|....|....|
  |..|....|....|
  |..|....|....|
  </code></pre>
  
  <p>using</p>
  
  <pre><code>td.small { width: 20% }
  td.large { width: 40% }
  </code></pre>
  
  <hr>
  
  <p>Then I want to add an extra large col with colspan=2 like so</p>
  
  <pre><code>|.......|....|
  |..|....|....|
  |..|....|....|
  </code></pre>
  
  <p>using</p>
  
  <pre><code>td.small { width: 20% }
  td.large { width: 40% }
  td.extralarge { width: 60% } /* 20+40=60 */
  </code></pre>
  
  <hr>
  
  <p>But I keep ending up with:</p>
  
  <pre><code>|.......|....|
  |...|...|....|
  |...|...|....|
  </code></pre>
  
  <hr>
  
  <p>A more graphical example <a href="http://jsbin.com/eqonow/1/edit" rel="noreferrer">is found on jsbin</a></p>
  
  <p><img src="https://i.stack.imgur.com/8VKLT.png" alt="js-bin screenshot"></p>
  
  <p>** <strong>edit</strong> **</p>
  
  <p>Sorry, I missed one detail:
  I must use (or so I think..?) <code>table-layout: fixed</code> since I'm having some special overflowing properties of the cells:</p>
  
  <pre><code>td {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  </code></pre>
  
  <p><a href="http://jsbin.com/eqonow/2/" rel="noreferrer">Updated jsbin found here</a>.</p>