title: HTML table with auto-fit for some columns, fixed width for others
body: <p>I'm trying to create a table adhering to the following requirements:</p>
  
  <ol>
  <li>The table width must be defined as 0 - the browser should calculate the width according to the column widths (this is to accommodate a column-resize plugin).</li>
  <li>Some columns may receive a fixed width (e.g. 50px);</li>
  <li>Columns that do not receive a fixed width, must auto-fit to the content.</li>
  </ol>
  
  <p>I have created a <a href="http://jsfiddle.net/sangil/HbARP/" rel="nofollow">small example</a> to illustrate the problem - as you can see column 3 stays at width 0 and so is not visible.</p>
  
  <p><em><strong>EDIT</em></strong>: If "table-layout: fixed" is removed. the third column appears, but the fixed widths are ignored and all columns become auto-fit.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;table&gt;
  &lt;tr&gt;
      &lt;td class="cell header" id="header1"&gt;Header 1&lt;/td&gt;
      &lt;td class="cell header" id="header2"&gt;Header 2&lt;/td&gt;
      &lt;td class="cell header" id="header3"&gt;Header 3&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td class="cell"&gt;Cell 1&lt;/td&gt;
      &lt;td class="cell"&gt;Cell 2&lt;/td&gt;
      &lt;td class="cell"&gt;Very looooong content&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>table {
      table-layout: fixed;
      width: 100%;
      border: 1px solid #696969;
  }
  
  .cell {
      color: #898989;
      border: 1px solid #888;
      padding: 2px;
      overflow: hidden;
  }
  
  .header {
      background-color: lightsteelblue;
      color: black;
  }
  
  #header1, #header2 {
      width: 50px;
  }
  </code></pre>
  
  <p>Is this even possible? Any help would be appreciated...</p>
  
  <p>​</p>