>>>>

>>>>.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?
>
>What conflicts do you see ? AFACS ,table-list is only affecting colors and text....

When I originally have that extra class uncommented, it affected all tables in the application, not only the one where I specified that class on the outer div. I think it's not coded correctly to apply only on itself, can you see the mistake in that css?