title: min-width for fluid column in fixed width table
body: <p>I'm trying to create a table where a fluid column has a min width.
  All other columns have a fixed width, and should not grow wider or thinner.</p>
  
  <p>I can get the fluid column to grow and shrink correctly, so that it takes up the remaining space in container which sets the max width to 900px, however I can't get it to take a minimum width.</p>
  
  <p>This means when the window and container are squashed, the fluid column gets covered, rather than behave like the fixed columns at this point.</p>
  
  <p>Applying a min-width to the th and/or td doesn't do anything.
  Applying a min-wdith to the div inside the fluid td does mean the text has a minimum width, however it doesn't stop the column from shrinking to less than this minimum, so the text is underneath the next column's text.</p>
  
  <p>Any ideas?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th class="fixed"&gt;fixed&lt;/th&gt;
              &lt;th class="fixed"&gt;fixed&lt;/th&gt;
              &lt;th class="fixed"&gt;fixed&lt;/th&gt;
              &lt;th class="fluid"&gt;fluid&lt;/th&gt;
              &lt;th class="fixed"&gt;fixed&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;fixed&lt;/td&gt;
              &lt;td&gt;fixed&lt;/td&gt;
              &lt;td&gt;fixed&lt;/td&gt;
              &lt;td class="fluid"&gt;&lt;div align="left"&gt;Some text here which gets truncated, however should have min width&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;fixed&lt;/td&gt;
          &lt;/tr&gt;  
      &lt;/tbody&gt;            
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.container {
      max-width: 900px;
  }
  
  table {
      table-layout: fixed;
      width: 100%;
      border: 1px solid #333;
      border-collapse: separate;
      border-spacing: 0;
  }
  
  th.fixed {
      width: 100px;
  }
  
  th.fluid {
      min-width: 100px;
  }
  
  td.fluid div {
      width: auto;
      white-space: nowrap; 
      overflow: hidden;
      text-overflow: ellipsis;
  }
  
  td.fluid {
      background-color: #aaa;
      min-width: 100px;
  }
  
  td {
      background-color: #ddd;
      border-right: 1px solid #333;
  }
  
  tr td {
       text-align: center;
  }
  
  table th, table td {
      border-top: 1px solid #333;
  }
  </code></pre>
  
  <p>JSfiddle:
  <a href="http://jsfiddle.net/ajcfrz1g/14/" rel="nofollow noreferrer">http://jsfiddle.net/ajcfrz1g/14/</a></p>