title: Showing/hiding table rows with css3 transitions
body: <p>On one part of my page I'm using css3 transitions to show/hide some divs with a nice sliding effect</p>
  
  <pre><code>.service_status {
          max-height: 0;
      -webkit-transition: max-height 1s ease-in-out;
      -moz-transition: max-height 1s ease-in-out;
      -ms-transition: max-height 1s ease-in-out;
      -o-transition: max-height 1s ease-in-out;
      transition: max-height 1s ease-in-out;
  }
  
  .service_status.open {
      max-height: 500px;
      -webkit-transition: max-height 1s ease-in-out;
      -moz-transition: max-height 1s ease-in-out;
      -ms-transition: max-height 1s ease-in-out;
      -o-transition: max-height 1s ease-in-out;
      transition: max-height 1s ease-in-out;
  }
  </code></pre>
  
  <p>I'd like to use the same technique on some table rows but max-height and height aren't having any effect (due to the CSS specs for tables I guess). Is there a way I can show/hide table rows with an animation using just CSS3 transitions and no js?</p>