jQuery tablesorter 2.0 - CSS Column & Row Highlights

# tablesorter

## CSS Column & Row Highlights

### Flexible client-side table sorting

Back to documentation

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

# Hover + Focus Highlight

Account # | First Name | Last Name | Age | Total | Discount | Diff
--- | --- | --- | --- | --- | --- | ---
A43 | Peter | Parker | 28 | 9.99 | 20.3% | +3
A255 | John | Hood | 33 | 19.99 | 25.1% | -7
A33 | Clark | Kent | 18 | 2.89 | 44.2% | -15
A1 | Bruce | Almighty | 45 | 153.19 | 44% | +19
A102 | Bruce | Evans | 56 | $153.19 | 23% | +9
A256 | John | Clark | 44 | ($19.89) | 25.1% | (5)
A23 | Elvis | Presley | 24 | ($9.99) | 50% | (22)
A10 | Frank | Carter | 40 | -12.99 | 20% | (6)

# Hover Highlight Only

Account # | First Name | Last Name | Age | Total | Discount | Diff
--- | --- | --- | --- | --- | --- | ---
A43 | Peter | Parker | 28 | 9.99 | 20.3% | +3
A255 | John | Hood | 33 | 19.99 | 25.1% | -7
A33 | Clark | Kent | 18 | 2.89 | 44.2% | -15
A1 | Bruce | Almighty | 45 | 153.19 | 44% | +19
A102 | Bruce | Evans | 56 | $153.19 | 23% | +9
A256 | John | Clark | 44 | ($19.89) | 25.1% | (5)
A23 | Elvis | Presley | 24 | ($9.99) | 50% | (22)
A10 | Frank | Carter | 40 | -12.99 | 20% | (6)

# Focus Highlight Only (click on a tbody cell)

Account # | First Name | Last Name | Age | Total | Discount | Diff
--- | --- | --- | --- | --- | --- | ---
A43 | Peter | Parker | 28 | 9.99 | 20.3% | +3
A255 | John | Hood | 33 | 19.99 | 25.1% | -7
A33 | Clark | Kent | 18 | 2.89 | 44.2% | -15
A1 | Bruce | Almighty | 45 | 153.19 | 44% | +19
A102 | Bruce | Evans | 56 | $153.19 | 23% | +9
A256 | John | Clark | 44 | ($19.89) | 25.1% | (5)
A23 | Elvis | Presley | 24 | ($9.99) | 50% | (22)
A10 | Frank | Carter | 40 | -12.99 | 20% | (6)

# Zebra + Hover + Focus Highlight

Account # | First Name | Last Name | Age | Total | Discount | Diff
--- | --- | --- | --- | --- | --- | ---
A43 | Peter | Parker | 28 | 9.99 | 20.3% | +3
A255 | John | Hood | 33 | 19.99 | 25.1% | -7
A33 | Clark | Kent | 18 | 2.89 | 44.2% | -15
A1 | Bruce | Almighty | 45 | 153.19 | 44% | +19
A102 | Bruce | Evans | 56 | $153.19 | 23% | +9
A256 | John | Clark | 44 | ($19.89) | 25.1% | (5)
A23 | Elvis | Presley | 24 | ($9.99) | 50% | (22)
A10 | Frank | Carter | 40 | -12.99 | 20% | (6)

# Zebra + Hover Highlight Only

Account # | First Name | Last Name | Age | Total | Discount | Diff
--- | --- | --- | --- | --- | --- | ---
A43 | Peter | Parker | 28 | 9.99 | 20.3% | +3
A255 | John | Hood | 33 | 19.99 | 25.1% | -7
A33 | Clark | Kent | 18 | 2.89 | 44.2% | -15
A1 | Bruce | Almighty | 45 | 153.19 | 44% | +19
A102 | Bruce | Evans | 56 | $153.19 | 23% | +9
A256 | John | Clark | 44 | ($19.89) | 25.1% | (5)
A23 | Elvis | Presley | 24 | ($9.99) | 50% | (22)
A10 | Frank | Carter | 40 | -12.99 | 20% | (6)

# Zebra + Focus Highlight Only (click on a tbody cell)

Account # | First Name | Last Name | Age | Total | Discount | Diff
--- | --- | --- | --- | --- | --- | ---
A43 | Peter | Parker | 28 | 9.99 | 20.3% | +3
A255 | John | Hood | 33 | 19.99 | 25.1% | -7
A33 | Clark | Kent | 18 | 2.89 | 44.2% | -15
A1 | Bruce | Almighty | 45 | 153.19 | 44% | +19
A102 | Bruce | Evans | 56 | $153.19 | 23% | +9
A256 | John | Clark | 44 | ($19.89) | 25.1% | (5)
A23 | Elvis | Presley | 24 | ($9.99) | 50% | (22)
A10 | Frank | Carter | 40 | -12.99 | 20% | (6)

# 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