title: Resizing columns proportionally in an HTML table
body: <p>I have an HTML table:</p>
  
  <pre><code>&lt;table style="width: 398px;"&gt;
    &lt;tbody&gt;
    &lt;tr&gt;
      &lt;th style="width: 40px"&gt;A&lt;/th&gt;
      &lt;th&gt;Col B&lt;/th&gt;
      &lt;th&gt;A longer column&lt;/th&gt;
      &lt;th&gt;D&lt;/th&gt;
    &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;table&gt;
  </code></pre>
  
  <p>The first column is set to a fixed width. I want the other three columns to use up all of the remaining space equally.</p>
  
  <p>Is there any way to do this without specifying the pixel width for each column?</p>
  
  <p>You can see that the last three columns do not use the same width:
  <a href="http://jsfiddle.net/ztyku/4/" rel="nofollow">http://jsfiddle.net/ztyku/4/</a></p>