Как сделать анимацию у таблицы которая увеличивается по щелчку?

Question

[bullock]

Есть таблица к которой привязан скрипт, когда пользователь щелкает на какой либо строке таблицы, то под этой строкой добавляется новая строка в которую скриптом вставляться новая таблица, и эта новая таблица шире чем исходная, из за чего вся исходная таблица расширяется под ширину вставленной.
Вопрос, как сделать это расширение плавным а не резким как сейчас?

Answer 1

[Exploding]

Так как-то?

td > table{
transition: all 300ms;
}

Comments

[bullock]

Да что то вроде этого но все ровно не работает

[Exploding]

bullock, ну так может тогда

td, td *{
transition: all 300ms;
}

А там уже смотреть)))

[bullock]

Exploding, Тут дело такое:
Я и цвет фона меняю когда открываю подтаблицу, и ваш метод срабатывает на цвет фона ячеек - фон начинает плавно появляется и исчезать, но этот эффект не применяется к изменениям размера таблицы.
Я попробовал добавлять такой класс при "активации" подтаблицы, но тоже нулевой эффект:

.cssclass_ActiveTable /* 'этот класс я добавляю к основной таблице */
{
    width: 100%;
    transition: all 2000ms;
}

table *{
    transition: all 2000ms;
}
td, td *{
    transition: all 3000ms;
}

[Exploding]

bullock, правильно, ибо transition анимирует переходные состояния, когда вы меняете заданное прежде значение свойства. А вставляя таблицу - ее размеры не должны анимироваться, т.к. она вставляется такой, какой и должна быть, т.е. для ее размеров нет переходных состояний.
Ну надеюсь поймете суть:)