Advanced Search

Great looking client side sortable html table

/ Published in: C#
Save to your folder(s)
This assumes you're using the jquery tablesorter plugin

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <table cellspacing="1" class="tablesorter">
  2.   <thead>
  3. 	<tr>
  4. 		<th>&nbsp;</th>
  5. 		<th class="header">Case</th>
  6. 	</tr>
  7.   </thead>
  8.   <tbody> 	
  9.     <tr class="even">
  10. 	<td>test</td>
  11.     </tr>
  12.   </tbody>
  13. </table>
  14.  
  15. //css
  16. table.tablesorter {margin:10px 0pt 15px; width: 100%; background-color:#CDCDCD; text-align: left;}
  17. table.tablesorter thead tr th, table.tablesorter tfoot tr th {border: 1px solid #FFF; background-color:#F0F0F6; padding: 4px;}
  18. table.tablesorter thead tr .header {background-image: url(/App_Themes/Theme1/Images/bg.gif); background-repeat: no-repeat; background-position: center right; cursor: pointer;}
  19. table.tablesorter tbody td {color: #3D3D3D;	padding: 4px; vertical-align: top; }
  20. table.tablesorter tbody tr.odd td {background-color:#F0F0F6;}
  21. table.tablesorter tbody tr.even td {background-color:#FFFFFF;}
  22. table.tablesorter thead tr .headerSortUp {background-image: url(/App_Themes/Theme1/Images/asc.gif);}
  23. table.tablesorter thead tr .headerSortDown {background-image: url(/App_Themes/Theme1/Images/desc.gif);}
  24. table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {background-color: #FFFFEF;}

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.