>>

>>.table-list {
>>    cursor: pointer;
>>}
>>
>>    .table-list > tbody > tr:nth-child(odd) > td {
>>        background-color: #f1f1f1;
>>    }
>>
>>    .table-list > tbody > tr:hover > td, .table-hover > thead > tr > th:hover {
>>        background-color: #e9e9e9;    
>>    }
>>
>>    .table-list > tfoot {
>>         font-size:large;
>>         text-align:right;   
>>         
>>    }
>>/*http://jsfiddle.net/venkateshwar/5KJka/1/
>>
>>*/
>>
>>   /*.tableSection table {
>>        display: table;
>>        width: 100%;
>>    }
>>    .tableSection thead, tbody {
>>        float: left;
>>        width: 100%;
>>    }
>>    .tableSection tbody {
>>        overflow: auto;
>>        height: 150px;
>>    }
>>    .tableSection tr {
>>        width: 100%;
>>        display: table;
>>        text-align: left;
>>    }
>>    .tableSection th, td {
>>        width: 33%;
>>    }*/
>>

>>
>>I had to comment tableSection part as it somehow affected all other tables even though I only tried to apply it as a class for a div in that particular form.
>
>With the same styles as the fiddle:

<table class="tableSection">
>    <thead>
>        <tr>
>            <th style="width:60%"><span class="text">album</span>
>            </th>
>            <th style="width:10%"><span class="text">song</span>
>            </th >
>            <th style="width:30%"><span class="text">genre</span>
>            </th>
>        </tr>
>    </thead>
>    <tbody>
>        <tr>
>            <td style="width:60%">album 0</td>
>            <td style="width:10%">song0</td>
>            <td style="width:30%">genre0</td>
>        </tr>
>        <!-- Repeat as required -->
>    </tbody>
>   <tfoot>
>            <td style="width:60%">Footer One</td>
>            <td style="width:10%">Footer Two</td>
>            <td style="width:30%">Footer Three</td>
>    </tfoot>
></table>

Do you see how to marry the table-list and tableSection classes?