apply the css stylesheet rules again in javascript after DOM manipulation

Question

I use JAVASCRIPT, JQuery (and JQuery Mobile) in a SYMFONY project.

My trouble is the following: I have a <table class='div 12'> (using JQuery Mobile table-reflow option for responsive view purpose) each <tr class='div 12'> of the table could be extended on a click.

On a click it does a call to the server and refresh the page.

The click action add an extra <tr class='div 12'> under the <tr class='div 12'> that is wished to be extended. The extra <tr class='div 12'> is not designed with the same columns characteristics as a regular row of the table (not the same <th> and <td> inside the <tr>) it is just a <td class='div 12'><div class='div 12'><form >....</form></div></td> placed inside the extra <tr>.

The stylesheet parameter in my CSS for small screen width is like this:

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

The DOM ELEMENTS <div class='div 12'><form >....</form></div> takes space as it should be if it was not inserted in the table.

Then in the table the width is too large and the table is then too large as well. The correct width that <div class='div 12'><form >....</form></div> should have is not recomputed with its existing surrounding tag in:

 <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'>

Hence I wonder if there is a JS function to reapply existing stylesheet to the DOM after it has been manipulated?