title: Table with no wrap, one column with overflow and as big as possible
body: <p>I have a fixed-width table of 400px with 3 columns.</p>
  
  <pre><code>&lt;table&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td class="wide"&gt;This is really really long and as much as possible should show but should eventually be cut off.&lt;/td&gt;&lt;td class="narrow"&gt;Small1&lt;/td&gt;&lt;td class="narrow"&gt;Small2&lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Here is the CSS.</p>
  
  <pre><code>table
  {
      table-layout: fixed;
      width: 400px;
  }
  td
  {
      border: 1px solid #000;
      white-space: nowrap;
  }
  td.wide
  {
      overflow: hidden;
      text-overflow: ellipsis;
  }
  td.narrow
  {
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/jer4C/3/" rel="nofollow">Here is the JSFiddle.</a></p>
  
  <p>Currently, each of the 3 columns takes up 1/3 of the space.  What I want is for the 2nd and 3rd columns to be as small as possible (without anything hidden or text-wrapped) and have the 1st column take up the remainder of the space (with any text that doesn't fit being hidden).</p>
  
  <p>Depending on the data displayed, the 2nd and 3rd columns may need to be wider or narrower to fit their content, so I don't want to define a fixed size for any column.</p>
  
  <p>Is this possible?</p>