title: CSS transition table-row height
body: <p>I have a CSS table. All the rows are the same height, but when a user clicks on one, the selected row should take up the entire table height and the rest of them should fade away.  I had it working by simply setting <code>display:none</code> on all the other rows, but I'd like to do something with transitions. </p>
  
  <p>I've tried setting <code>max-height</code> to 100% and then changing it to 0, but it only makes the selected row slightly bigger than the rest while the rest stay where they are.  I've tried changing the <code>height</code> from 100% to 0, but with height at 100%, the top row is massive and the rest of them are about 15px tall. </p>
  
  <p>In essence, I'd like to transition between <code>height:auto</code> to <code>height:0</code>, but that doesn't work.  All it does is snap back and forth without a transition.  Any ideas of how to make that work on a table-row?  </p>