title: How to set table width to 100% with a mix of relative and fixed size columns
body: <p>I have this table width set to 100%.
  Inside I have 3 columns, the middle one should be fixed to 300px. Left and Right columns should be divided equally in the remaining space.</p>
  
  <p>The result is that the col with the image gets stretched. How to fix this so that left and right cols stay the same size?</p>
  
  <p><a href="http://jsfiddle.net/RqhCv/" rel="nofollow">http://jsfiddle.net/RqhCv/</a></p>
  
  <p><strong>Important note: Do not add any content to left column, the content must remain <code>&amp;nbsp;</code></strong><br>
  <strong>Also must work in IE7</strong></p>
  
  <p><em><strong>Please Do NOT post answers about DIVs. This question is about tables.</em></strong></p>
  
  <pre><code>   &lt;table style="width:100%;height:100%;"&gt;
          &lt;tr&gt;
              &lt;td bgcolor="#FF0000"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td bgcolor="#99CC33" style="width:300px;"&gt;this is 300PX&lt;/td&gt;
              &lt;td bgcolor="#0000FF"&gt;&lt;img src="http://www.google.com/logos/2012/kondratyuk-12-hp.jpg" width="377" height="167"&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>...</p>
  
  <p><em>I did try already a lot of things including COLGROUP, nothing works...</em></p>