CODEWITHSUNDEEP
javascriptjquerycss
Basti
Basti

Reputation: 149

jQuery: Smooth resize of a table cell for text replacement

I have a table without fixed width columns (an this is ok so). Long text is at the moment printed out twice: First 50 Letters and the complete text in an hidden field.

Something like this: https://jsfiddle.net/vrtf6q14/

When clicking on the short version, colwidth (and height) decreases, when the text is faded out and then increased to full size. And then vice versa.

Is there any trick, to "smooth" resize the cell to its new size? And is it possible to toggle both texts the same time on top of each other? Using divs and position:absolute maybe?

Maybe it's totally simple, but I'm stuck.

Upvotes: 0

Views: 167

Answers (1)

Korgrue
Korgrue

Reputation: 3478

You cannot apply CSS transitions to TR or TD elements.

You can however wrap the content of the TD elements in DIVs and apply animation/transforms to the div. The TDs should animate scale/width/whatever along with the Div's inside them.

<tr>
  <td><div>Your Content</div></td>
  <td><div>Your Content</div></td>
</tr>

Upvotes: 2

Related Questions