title: Table columns, setting both min and max width with css
body: <p>I would like to have a table which in the columns can stretch but I'm having a little trouble with min and max width in css. </p>
  
  <p>It also seems that theres some conflicting answers around how this works:</p>
  
  <ul>
  <li>min/max width should work: <a href="https://stackoverflow.com/questions/4636269/table-td-width-under-control">Prevent text from overlap table td width</a></li>
  <li>min/max width are unsupported: <a href="https://stackoverflow.com/questions/6426779/min-width-and-max-height-for-table-atrributes">Min-width and max-height for table attributes</a></li>
  </ul>
  
  <p>I would like to have the following</p>
  
  <pre><code>table{
     width:100%;
  }
  .a, .b, .c
  {
      background-color: red;
  }
  .a
  {
      min-width: 10px;
      max-width: 20px;
  }
  .b
  {
      min-width: 40px;
      max-width: 45px;
  }
  .c
  {
  }
  
  &lt;table&gt;
      &lt;tr&gt;
          &lt;td class="a"&gt;A&lt;/td&gt;
          &lt;td class="b"&gt;B&lt;/td&gt;
          &lt;td class="c"&gt;C&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>Is there a way of achieving this without javascript</strong> (ie constrained stretching of columns with a table)?</p>
  
  <ul>
  <li>I only need this to work with CSS3 + HTML5</li>
  <li>a jsfiddle with stuff not expanding: <a href="http://jsfiddle.net/4b3RZ/10/" rel="noreferrer">http://jsfiddle.net/4b3RZ/10/</a></li>
  <li>if I set only min-width on the columns i get a proportional stretch:<a href="http://jsfiddle.net/4b3RZ/8/" rel="noreferrer">http://jsfiddle.net/4b3RZ/8/</a></li>
  </ul>
  
  <p>below is a table of what actually gets rendered for some different css setups:</p>
  
  <p><img src="https://i.stack.imgur.com/l9lfF.png" alt="enter image description here"></p>