Thus, We need to set a higher max-height, that will be more than the needed by some cells. 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. The problem with max-height transition is only a delay, caused by how the transition is calculated. 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. Under these circumstances, our only choice is restrict the height indirectly using inner markup, normally a div element. 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. In CSS 2.1, the height of a cell box is the minimum height required by the content. 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). With a custom transition curve, we can "mask off" the delay of using a high max-height. Using a Div to wrapper the content into the cell, we are able to use max-height property, and also the max-height transition. 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). I thought that the essence of the solution was clear, and anybody would be able to use it. It's like: "Hey, the idea is here, just apply it wherever you want". In fact my previous answer DOES ANSWER the question! But not absolutely explicitly.
0 Comments
Leave a Reply. |