title: Fluid and Fixed Columns Table
body: <p>I have a table on my layout that has 5 columns, 3 of them should be fixed width in px and the other 2 should be fluid.</p>
  
  <p>It sounded simple at first, but the problem is the two fluid columns should behave differently.</p>
  
  <p>The last column should stretch as much as it can to fit its contents, so they are never hidden, but shouldn't ever leave empty space. And the middle column should occupy all the free space it can find, but also overflow to hidden in case the last one needs to grow larger.</p>
  
  <p><img src="https://i.stack.imgur.com/n955P.png" alt="Table diagram"></p>
  
  <p>I tried to make this work with css, but I couldn't manage to make it work... Is there a way to do this with pure css or I need js?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>That's what I got so far: </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td class="fixed"&gt;fixed&lt;/td&gt;
          &lt;td class="fixed"&gt;fixed&lt;/td&gt;
          &lt;td class="fluid hidden"&gt;fluid&lt;/td&gt;
          &lt;td class="fixed"&gt;fixed&lt;/td&gt;
          &lt;td class="fluid visible"&gt;this content should always be visible&lt;/td&gt;
      &lt;/tr&gt;    
  &lt;/table&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>table{
     width: 100%;
     table-layout: fixed;
  }
  
  td{
      padding: 10px;  
      white-space: nowrap;
  }
  
  .fixed{
      background-color: #ddd;
      width: 60px;
  }
  
  .fluid{
      background-color: #aaa;
  }
  
  .visible{
  
  }
  
  .hidden{
      overflow:hidden;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/KzVbX/" rel="noreferrer">http://jsfiddle.net/KzVbX/</a></p>
  
  <p>It works almost as expected. Except for the last column.</p>