title: CSS Transition with Tables
body: <p>I have multiple tables which are in one row.</p>
  
  <ul>
  <li><p>When one is <strong>selected</strong>, it should expand one (until now hidden) column.</p></li>
  <li><p>When it is <strong>deselected</strong>, it should shrink slowly. </p></li>
  </ul>
  
  <p>I tried it with an CSS Transition, but when there is no text in the cell, the shrinking doesn't work.</p>
  
  <pre><code>.column2 {
      background-color: #ddd;
      width: 0em;
      overflow: hidden;
      -webkit-transition: max-width 1.5s ease ;
      -moz-transition: max-width 1.5s ease ;
      transition: max-width 1.5s ease ;
      max-width: 0em;
  }
  
  table.focus .column2{
      -webkit-transition: max-width 1.5s ease ;
      -moz-transition: max-width 1.5s ease;
      transition: max-width 1.5s ease;
      width: 10em;
      max-width: 10em;
  }
  </code></pre>
  
  <p>I made a <a href="http://jsfiddle.net/51bsbzL0/341/" rel="nofollow noreferrer">fiddle</a> with an example code.</p>
  
  <p>Another thing, when I set the width for the first column and expand the second column, the width of the first column also changed slightly.</p>
  
  <p>And I can't set the width of a cell to 0. Is there a solution which work with all browsers?</p>