>>>>.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%; >>>> }*/ >>>>>>>>
<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>>>