Reigel's demo page

HTML

<table id='mytab'>
    <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;
}
th span {
    font-weight: normal;
    margin-left: 5px;
}

JavaScript

$(function(){
    
    $('th').each(function(){
        var text = $(this).text();
        $(this).data('text',text);
    });
    $('#mytab tr.header td').click(function(){
        var index = $(this).index() + 1;
        $('#mytab tr:has(th)').each(function(){
            var str = $(this).nextUntil('tr:has(th)')
                .find(':nth-child('+index+')').map(function(){
                return $(this).text();
            }).get().join(" ");
            $(this).find('th').html(function(){
                return $(this).data('text') + '<span>--&gt; ' + str + '</span>';
            })
        });
    })
});