Применить правила таблицы стилей CSS снова в JavaScript после манипуляции DOM

Question

Я использую JAVASCRIPT, JQuery (и JQuery Mobile) в проекте SYMFONY.

Моя проблема заключается в следующем: у меня есть <table class='div 12'> (используя JQuery Mobile table-reflow вариант для адаптивного просмотра цели) каждый <tr class='div 12'> таблицы могут быть расширены на один клик.

По щелчку он звонит на сервер и обновляет страницу.

Действие клика добавить дополнительный <tr class='div 12'> под <tr class='div 12'> это желает быть продлен. Экстра <tr class='div 12'> не имеет тех же характеристик столбцов, что и обычная строка таблицы (не то же самое <th> а также <td> внутри <tr>) это просто <td class='div 12'><div class='div 12'><form >....</form></div></td> помещен внутри дополнительного <tr>,

Параметр таблицы стилей в моем CSS для небольшой ширины экрана выглядит следующим образом:

[class*="col-"] {
    width: 98%;
    padding-left: 1%;
    padding-right: 1%;
}

ДОМ ЭЛЕМЕНТЫ <div class='div 12'><form >....</form></div> занимает место, как и должно быть, если он не был вставлен в таблицу.

Тогда в таблице ширина слишком велика, и таблица тоже слишком велика. Правильная ширина, которая <div class='div 12'><form >....</form></div> должен иметь не пересчитывается с существующим тегом в:

 <table class='div 12'>
<thead  class='div 12'>...</thead>
<tbody  class='div 12'>
     ...
    <tr class='div 12'><td><div class='div 12'><form >....</form></div></td></tr>
     ...
</tbody>
</table class='div 12'>

Следовательно, мне интересно, есть ли функция JS для повторного применения существующей таблицы стилей к DOM после того, как она была обработана?