title: Make td smaller than its content?
body: <p>Is there any way at all to make a table-cell smaller than its contents using purely css, and without altering the DOM?
  Setting the width of a td to smaller than its child only makes it as large as its child for me. I also tried adding table-layout:fixed to the table but that didn't make any difference.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;table&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;div/&gt;&lt;/td&gt;
      &lt;td class="mycell"&gt;&lt;div/&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div/&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>table {
      table-layout:fixed;
  }
  td {
      border:3px solid black;
  }
  div {
      border:3px solid red;
      width:50px;
      height:50px;
  }
  .mycell {
   width:20px;   
  </code></pre>
  
  <p><strong>jsfiddle:</strong></p>
  
  <p><a href="http://jsfiddle.net/clox/EzKNy/" rel="nofollow">http://jsfiddle.net/clox/EzKNy/</a></p>