title: Colspan works with some combinations but not others
body: <p>I am trying to create a table where both rows are three cells. I want the first row to be 3 equal width cells, while the second row has 2 equal width cells (each 1/4 of the first row's cells) and a third cell that fills up the rest of the row.</p>
  
  <p><a href="https://i.stack.imgur.com/abvG0.png" rel="nofollow noreferrer">Here is a picture of what I have now</a></p>
  
  <p>I want to merge 3+4 in the top table, but when I actually merge them I get the second table.
  Here is a fiddle that I have:
  <a href="http://jsfiddle.net/9n3oyf2w/" rel="nofollow noreferrer">http://jsfiddle.net/9n3oyf2w/</a></p>
  
  <pre><code>&lt;!-- This works: --&gt;
  
  &lt;tr&gt;
    &lt;td colspan="4"&gt;a&lt;/td&gt;
    &lt;td colspan="2"&gt;b&lt;/td&gt;
    &lt;td colspan="2"&gt;c&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td colspan="1"&gt;1&lt;/td&gt;
    &lt;td colspan="1"&gt;2&lt;/td&gt;
    &lt;td colspan="1"&gt;3&lt;/td&gt;
    &lt;td colspan="5"&gt;4&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;!-- This doesn't work: --&gt;
  
  &lt;tr&gt;
    &lt;td colspan="4"&gt;a&lt;/td&gt;
    &lt;td colspan="2"&gt;b&lt;/td&gt;
    &lt;td colspan="2"&gt;c&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td colspan="1"&gt;1&lt;/td&gt;
    &lt;td colspan="1"&gt;2&lt;/td&gt;
    &lt;td colspan="6"&gt;3+4&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>I have no clue what I am doing wrong but it has been driving me crazy. I've tried other combinations of colspans and some of them work while others don't.</p>
  
  <p>EDIT:</p>
  
  <p>New pic for what I am trying to achieve:
  <a href="https://i.stack.imgur.com/2ithN.png" rel="nofollow noreferrer">link</a></p>