Showing/hiding table rows with css3 transitions

Question

On one part of my page I'm using css3 transitions to show/hide some divs with a nice sliding effect

.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; } 

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?

Answer 1

Update:

In fact my previous answer DOES ANSWER the question! But not absolutely explicitly. It's like: "Hey, the idea is here, just apply it wherever you want". I thought that the essence of the solution was clear, and anybody would be able to use it... But any way, I will expose the whole idea, in the most clear way I can, and also will apply the solution to a simple table (since OP don't shown any structure).

Solution:

Short Version:

Using a Div to wrapper the content into the cell, we are able to use max-height property, and also the max-height transition. With a custom transition curve, we can "mask off" the delay of using a high max-height.

Demo here: http://jsfiddle.net/1rnc9bbm/4/

Long Version:

The whole problem is that a table-cell's height is the minimum to fit its content, and table-row's height is the minimum height required for all cells (so, the height of the table-row is the minimum height required by its tallest cell).

From W3 (About Table-Cells Height):

In CSS 2.1, the height of a cell box is the minimum height required by the content.

From W3 (About Table-Rowss Height):

The height of a 'table-row' element's box is calculated once the user agent has all the cells in the row available: it is the maximum of the row's computed 'height', the computed 'height' of each cell in the row, and the minimum height (MIN) required by the cells.

Under these circumstances, our only choice is restrict the height indirectly using inner markup, normally a div element. Because a Div element respect a max-height, it will stretch our content, and our table-cell will also respect the "div's max-height", because this is all the required height it needs.

The problem with max-height transition is only a delay, caused by how the transition is calculated. In a table, usually you display a dynamic content that have dynamic and unpredictable length (which becomes table-cell height), so We don't know the precise max-height that our table will need to exactly fit the expanded content. Thus, We need to set a higher max-height, that will be more than the needed by some cells. When it happens, our transition is calculated wrong (based on the max-height and not in total height that will be shown/animated), and animation becomes weird and imprecise. To show a nice and smooth transition for user, I found a brilliant solution using a custom transition curve. More details about this problem and its solution are at the end of this answer.

Well, we have our "max-height respectful element", a smooth transition for our max-height animation, and our table... Now is time to put everything together:

Html:

<table>     <tr>         <td>             <div>                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac lorem ante. Vestibulum quis magna pretium, lacinia arcu at, condimentum odio. Ut ultrices tempor metus, sit amet tristique nibh vestibulum in. Pellentesque vel velit eget purus mollis placerat sed sit amet enim. Sed efficitur orci sapien, ac laoreet erat fringilla sodales.             </div>         </td>     </tr> </table> 

Css:

table{     border: 1px solid #ddd; }   div{     background-color: #ddd;     width: 400px;      overflow: hidden;     -webkit-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);     -moz-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);     transition: max-height 1.5s ease cubic-bezier(0, 1.05, 0, 1);      max-height: 38px; }  div:hover{     -webkit-transition: max-height 2s ease;     -moz-transition: max-height 2s ease;     transition: max-height 2s ease;      max-height: 400px; } 

Simple demo here (the code shown above): http://jsfiddle.net/1rnc9bbm/3/ , and a more complete (and common) table demo here: http://jsfiddle.net/1rnc9bbm/4/

I don't think that the downvotes were fair, but I agree that this version now is a lot more complete, and does answer in a explicitly way the OP's question. If you have any questions, or points that want me to clarify, you don't need to downvote (please), just ask/comment above. I'll be very happy to help if I can.

Obs: OP don't provided a Html, neither details about the table He want's to expand, so my whole solution is based in the usually table use.

Previous (Original) Answer:

I just answered this exacly situation in another question here. And in my specific case, I needed to do exactly what You said. I have a table, and want to expand a table row when user hovers it.

The same answer applies to your question:
https://stackoverflow.com/a/27773588/3395460

Linked Answer (Smooth Transitions with Higher Max-Height value than needs by container):

As pointed by @maskacovnik, it'll be a more complete (and integral) answer if it also contains the code of my first answer, and also the code that explains part of the solution of my updated answer. Here is it:

[...] I needed to show mode details of a product description inside a cell-table when user hovers the cell. Without user hovering, only the maximum of 2 lines of description are shown. Once user hovers it, all lines (text can be since 1 to 8 lines, dynamic and unpredictable length) must be show with some kind of height animation.

I come to the same dilemma, and choose to use the max-height transition (setting a high max-height, which I was sure that will not cut my text), because this approach appears to me to be the cleanest solution to animate the height.

But I couldn't be satisfied with the delay on the "slide up" animation, just like You. That's when I found a commentary about transition curve here: http://css3.bradshawenterprises.com/animating_height/ .

The Idea of this guy is brilliant, but just this solution alone "cut-off" the effect of "slide down" animation. So thinking a little I just come to a final solution.

So here is my solution using the Rhys's Idea (Guy of link above):

Slide Down Animation (Hover), with a "smooth grow", and Slide Up Animation without (virtually) "delay":

div {   background-color: #ddd;   width: 400px;   overflow: hidden;   -webkit-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);   -moz-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);   transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);   max-height: 38px; } div:hover {   -webkit-transition: max-height 2s ease;   -moz-transition: max-height 2s ease;   transition: max-height 2s ease;   max-height: 400px; }  <div>   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac lorem ante. Vestibulum quis magna pretium, lacinia arcu at, condimentum odio. Ut ultrices tempor metus, sit amet tristique nibh vestibulum in. Pellentesque vel velit eget purus mollis   placerat sed sit amet enim. Sed efficitur orci sapien, ac laoreet erat fringilla sodales. </div> 

This is a perfect (in my opinion) solution for menu, descriptions and everything that isn't extremely unpredictable, but as You pointed before, there is the need to set up a high max-height, and may cut-off a surprisingly tall dynamic content. In this specific situation, I'll use jQuery/JavaScript to animate the height instead. Since the update of the content will be done using some sort of JavaScript already, I can't see any harm using a Js approach to animation.

Hope I helped!