title: table-layout: fixed issue with column widths
body: <p>We're using the CSS <code>table-layout: fixed</code> property for our mobile app. (I don't recall the full reason, but I believe it had to do with enabling word wrapping of some sorts)...</p>
  
  <p>I've run into an issue where we need to size one of the two columns of the two column table. Not a big deal, usually we do this:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tbody&gt;        
      &lt;tr&gt;
        &lt;th width="20%"&gt;hello world&lt;/th&gt;
        &lt;td&gt;hello world&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>That works fine.</p>
  
  <p>However, if we need to create a row that spans both columns BEFORE this one:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tbody&gt;   
      &lt;tr&gt;
        &lt;td colspan="2"&gt;hello world&lt;/th&gt;
      &lt;/tr&gt;     
      &lt;tr&gt;
        &lt;th width="20%"&gt;hello world&lt;/th&gt;
        &lt;td&gt;hello world&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>What happens, at least in Chrome, is that the two columns snap to 50% widths. I have a jsbin sample here:</p>
  
  <p><a href="http://jsbin.com/ejovut/3" rel="nofollow noreferrer">http://jsbin.com/ejovut/3</a></p>
  
  <p>Is this normal behavior? A Chrome bug? A way to work around this issue? </p>