Dynamic table using jQuery

HTML

<table>
    <thead>
    
        <tr>
            <th class="expanded">
                Title
                <span class="icon">-</span>
            </th>
            <th class="collapsed">
                Lonnnnnng Header 2 
                <span class="icon">+</span>
            </th>
            <th>
                Lonnnnnng Header 3 
                <span class="icon">+</span>
            </th>
            <th>
                Lonnnnnng Header 4 
                <span class="icon">+</span>
            </th>
        </tr>
    </thead>
    <tr>
        <td>Title</td>
        <td>row 1, cell 2</td>
        <td>row 1, cell 3</td>
        <td>row 1, cell 4</td>
    </tr>
    <tr>
        <td>Title</td>
        <td>row 2, cell 2</td>
        <td>row 2, cell 3</td>
        <td>row 2, cell 4</td>
    </tr>
    <tr>
        <td>Title</td>
        <td>row 3, cell 2</td>
        <td>row 3, cell 3</td>
        <td>row 3, cell 4</td>
    </tr>
    <tr>
        <td>Title</td>
        <td>row 4, cell 2</td>
        <td>row 4, cell 3</td>
        <td>row 4, cell 4</td>
    </tr>
   
</table>

CSS

body {
    font-family: Sans-Serif;
}
table {
    border: solid 1px #888;
    border-collapse: collapse;
    table-layout: fixed;
}
table thead {
    background-color: #6E6E6E;
    color: #fff;
}
table td, table th {
    padding: 5px;
    border: solid 1px #888;
    width:100px;
}
/*
no need for .alt, just use :nth-child 
*/
 table tbody tr:nth-child(odd) {
    background-color: #ddd;
}
/*
no need for .hover, just use :hover
if you only want the hover color to change on even rows, use table tbody tr:nth-child(even):hover
*/
 table tbody tr:hover {
    background-color: #81DAF5;
    overflow:scroll;
     height:80px; 
     width:100%; 
     overflow:auto;
}


/*
added these classes, feel free to change
*/
.icon
{
    border:none;
    font-weight: bold;
}
.icon:hover
{
    color: #81DAF5;
    cursor: pointer;
}

.expanded {
    width: auto;
}

JavaScript

$(function () {
    //set up click event on icons
    $('.icon').click(function(){
        var $this = $(this),
            th = $this.closest('th'),
            index = th.index();
        console.log($this, th, index);
    });

});