Table + jQuery - Hide colspan columns

[Wclmvfekrjpoc]

Info

• I have two rows of headings on my table.
• The second heading row is just a normal heading row, nothing special.
• The first heading row is made to group the second heading row by colspan.
• I hide a column with jquery.

ProblemWhen hiding a row I change the bottom rows, not the top row with colspan. Is there a clever way to calculate when "Head2" is going to be hidden?

• "Head2" should be hidden if one or more of its "childs" are hidden.
• Some empty th might take its place to fill the emptyness, or else the other elements might fall into the wrong place.
• I can have a much bigger table than this which means it has to be dynamic and somehow calculate this from an index number or an id.
• Classes can be added to the HTML if needed.
• This process should be reversable. Later on I'm going to show / hide columns by user interaction.

JS Fiddle - http://jsfiddle.net/94pbR/7/HTML\[code\]<table> <thead> <tr> <th>Head1</th> <th colspan="3">Head2</th> <th>Head3</th> </tr> <tr class="primary"> <th>Header1</th> <th>Header2</th> <th>Header3</th> <th>Header4</th> <th>Header5</th> </tr> </thead> <tbody> <td>Test1</td> <td>Test2</td> <td>Test3</td> <td>Test4</td> <td>Test5</td> </tbody></table>\[/code\]CSS\[code\]table { border: 1px solid #ccc;}td, th { border: 1px solid #ccc;}\[/code\]jQuery / JS\[code\]jQuery(document).ready(function($) { $('td:nth-child(2), tr.primary th:nth-child(2)').hide();});\[/code\]