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
orcolspan
within thetbody
(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 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).
- Add a class name of
- To add Focus Highlighting:
- Add a class name of
"focus-highlight"
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).
- Add a class name of
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) |
CSS
/* TABLE BACKGROUND color (match the original theme) */
table.hover-highlight td:before,
table.focus-highlight td:before {
background: #fff;
}
/* ODD ZEBRA STRIPE color (needs zebra widget) */
.hover-highlight .odd td:before, .hover-highlight .odd th:before,
.focus-highlight .odd td:before, .focus-highlight .odd th:before {
background: #ebf2fa;
}
/* EVEN ZEBRA STRIPE color (needs zebra widget) */
.hover-highlight .even td:before, .hover-highlight .even th:before,
.focus-highlight .even td:before, .focus-highlight .even th:before {
background-color: #fff;
}
/* FOCUS ROW highlight color (touch devices) */
.focus-highlight td:focus::before, .focus-highlight th:focus::before {
background-color: lightblue;
}
/* FOCUS COLUMN highlight color (touch devices) */
.focus-highlight td:focus::after, .focus-highlight th:focus::after {
background-color: lightblue;
}
/* FOCUS CELL highlight color */
.focus-highlight th:focus, .focus-highlight td:focus,
.focus-highlight .even th:focus, .focus-highlight .even td:focus,
.focus-highlight .odd th:focus, .focus-highlight .odd td:focus {
background-color: #d9d9d9;
color: #333;
}
/* HOVER ROW highlight colors */
table.hover-highlight tbody > tr:hover > td, /* override tablesorter theme row hover */
table.hover-highlight tbody > tr.odd:hover > td,
table.hover-highlight tbody > tr.even:hover > td {
background-color: #ffa;
}
/* HOVER COLUMN highlight colors */
.hover-highlight tbody tr td:hover::after,
.hover-highlight tbody tr th:hover::after {
background-color: #ffa;
}
/* ************************************************* */
/* **** No need to modify the definitions below **** */
/* ************************************************* */
.focus-highlight td:focus::after, .focus-highlight th:focus::after,
.hover-highlight td:hover::after, .hover-highlight th:hover::after {
content: '';
position: absolute;
width: 100%;
height: 999em;
left: 0;
top: -555em;
z-index: -1;
}
.focus-highlight td:focus::before, .focus-highlight th:focus::before {
content: '';
position: absolute;
width: 999em;
height: 100%;
left: -555em;
top: 0;
z-index: -2;
}
/* required styles */
.hover-highlight,
.focus-highlight {
overflow: hidden;
}
.hover-highlight td, .hover-highlight th,
.focus-highlight td, .focus-highlight th {
position: relative;
outline: 0;
}
/* override the tablesorter theme styling */
table.hover-highlight, table.hover-highlight tbody > tr > td,
table.focus-highlight, table.focus-highlight tbody > tr > td,
/* override zebra styling */
table.hover-highlight tbody tr.even > th,
table.hover-highlight tbody tr.even > td,
table.hover-highlight tbody tr.odd > th,
table.hover-highlight tbody tr.odd > td,
table.focus-highlight tbody tr.even > th,
table.focus-highlight tbody tr.even > td,
table.focus-highlight tbody tr.odd > th,
table.focus-highlight tbody tr.odd > td {
background: transparent;
}
/* table background positioned under the highlight */
table.hover-highlight td:before,
table.focus-highlight td:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -3;
}
Javascript
$(function() {
// call the tablesorter plugin
$("table").tablesorter({
theme: 'blue'
});
// Make table cell focusable
// http://css-tricks.com/simple-css-row-column-highlighting/
if ( $('.focus-highlight').length ) {
$('.focus-highlight').find('td, th')
.attr('tabindex', '1')
// add touch device support
.on('touchstart', function() {
$(this).focus();
});
}
});