Reigel's demo page
HTML
<table id='mytab' border="1">
<tr>
<th colspan="6">OS</th>
</tr>
<tr class='header'>
<td></td>
<td>Fedora</td>
<td>Cent Os</td>
<td>Ubuntu</td>
<td>Suse</td>
<td>Redhat</td>
</tr>
<tr>
<th colspan="6">Versions</th>
</tr>
<tr>
<td></td>
<td>6</td>
<td>v2.4</td>
<td>beta 2</td>
<td>8</td>
<td>2008</td>
</tr>
<tr>
<td></td>
<td>7</td>
<td>v3.4</td>
<td>1</td>
<td>9</td>
<td>2009</td>
</tr>
<tr>
<td></td>
<td>10</td>
<td>v4.4</td>
<td>2</td>
<td>10</td>
<td>2010</td>
</tr>
<tr>
<th colspan="6">Support</th>
</tr>
<tr>
<td></td>
<td>All Support Free</td>
<td>Partial Support</td>
<td>Paid Support</td>
<td>Community Support</td>
<td>Full support</td>
</tr>
</table>
CSS
th {
color:grey;
font-weight: bold;
}
JavaScript
$(function(){
$('#mytab tr.header td').click(function(){
var index = $(this).index() + 1;
$('tr td:nth-child(' + index + ')').siblings().hide();
})
});