Dynamic table using jQuery

HTML

<table>
 <thead>
    <tr>
        <th>Lonnnnnng Header 1  <span><b>-</b></span></th>
        <th>Lonnnnnng Header 2  <span><b>-</b></span></th>
        <th>Lonnnnnng Header 3  <span><b>-</b></span></th>
     </tr>
 </thead>
 <tr>
     <td>row 1, cell 1</td>
     <td>row 1, cell 2</td>
     <td>row 1, cell 3</td>
 </tr>
 <tr>
     <td>row 2, cell 1</td>
     <td>row 2, cell 2</td>
     <td>row 2, cell 3</td>
 </tr>
 <tr>
     <td>row 3, cell 1</td>
     <td>row 3, cell 2</td>
     <td>row 3, cell 3</td>
 </tr>
 <tr>
     <td>row 4, cell 1</td>
     <td>row 4, cell 2</td>
     <td>row 4, cell 3</td>
 </tr>
 
 </table>

CSS

body { font-family: Sans-Serif; }

table { 
    width: 100%;
    border: solid 1px #888;
    border-collapse: collapse;
    table-layout: fixed;
}

.collapsed {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 49px;
}

table thead { background-color: #6E6E6E; color: #fff; }     
table td, table th {
    padding: 5px;
    border: solid 1px #888;
}
.alt { background-color: #ddd; }       
.hover { background-color: #81DAF5; }

JavaScript

$(function() {
    $('table tbody tr:odd').addClass('alt');

    $('table tbody tr').hover(function() {
        $(this).addClass('hover');
    }, function() {
        $(this).removeClass('hover');
    });
});

$('tr th').click(function() {

    var index = (this.cellIndex + 1);
    var cells = $('table tr > :nth-child(' + index + ')');
    cells.toggleClass('collapsed');

    if ($(this).hasClass('collapsed')) {
        $(this).find('span').html('<b>+</b>');
    }
    else {
        $(this).find('span').html('<b>-</b>');
    }
});