>>>.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>>