tablesorter

CSS Column & Row Highlights

Flexible client-side table sorting

NOTE!

• The css in this demo only works with modern browsers (IE9+).
• This css is originally from this CSS-Tricks article; it has been modified to work with tablesorter themes.
• It does not work properly on cells with rowspan or colspan within the tbody (I am referring to info-only tbodies, since tablesorter does not yet support sorting with these spans); if you do need a script to highlight spanned columns & rows, then take a look at the wholly plugin.

• To add Hover Highlighting:
  • Add a class name of "hover-highlight" to the table to enable hover row and column highlighting.
  • Include the CSS shown on this page.
  • If needed, modify the table background color & zebra striping row colors.
  • Modify the hover highlight row and/or column color definitions as desired (they can be different colors).

• To add Focus Highlighting:
  • Add a class name of "focus-highlight" to the table to enable focused cell with row and column highlighting.
  • Click on a table cell in the demo below to see the highlight; only one element, per page, can be active at a time.
  • Include the CSS and the extra javascript shown on this page to make table cells focusable.
  • If needed, modify the table background color & zebra striping row colors.
  • Modify the focus highlight row and/or column color definitions as desired (they can be different colors).

Demo

Page Header

<!-- Add any theme; the css for highlighting may need modification
 to match the selected theme, if it isn't the "blue" theme -->
<link href="css/theme.blue.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.tablesorter.js"></script>

CSS

Javascript