2013-11-25 12:59:30 +00:00
<!DOCTYPE html>
< html >
< head >
2014-10-09 21:04:28 +00:00
< meta charset = "utf-8" >
2013-11-25 12:59:30 +00:00
< title > jQuery plugin: Tablesorter 2.0 - CSS Sticky Header Widget< / title >
<!-- jQuery -->
2014-05-21 22:09:23 +00:00
< script src = "js/jquery-latest.min.js" > < / script >
2015-02-13 12:56:45 +00:00
< script src = "js/jquery-ui.min.js" > < / script >
2013-11-25 12:59:30 +00:00
<!-- Demo stuff -->
2014-05-21 22:09:23 +00:00
< link rel = "stylesheet" href = "css/jquery-ui.min.css" >
2013-11-25 12:59:30 +00:00
< link rel = "stylesheet" href = "css/jq.css" >
2014-11-27 03:22:15 +00:00
< link rel = "stylesheet" href = "css/prettify.css" >
< link rel = "stylesheet" href = "css/magnific-popup.css" >
2013-11-25 12:59:30 +00:00
< script src = "js/prettify.js" > < / script >
< script src = "js/docs.js" > < / script >
2014-11-27 03:22:15 +00:00
< script src = "js/jquery.magnific-popup.min.js" > < / script >
2013-11-25 12:59:30 +00:00
<!-- Tablesorter: theme -->
< link class = "theme" rel = "stylesheet" href = "../css/theme.default.css" >
< link class = "theme" rel = "stylesheet" href = "../css/theme.blue.css" >
< link class = "theme" rel = "stylesheet" href = "../css/theme.green.css" >
< link class = "theme" rel = "stylesheet" href = "../css/theme.grey.css" >
< link class = "theme" rel = "stylesheet" href = "../css/theme.ice.css" >
< link class = "theme" rel = "stylesheet" href = "../css/theme.black-ice.css" >
< link class = "theme" rel = "stylesheet" href = "../css/theme.dark.css" >
< link class = "theme" rel = "stylesheet" href = "../css/theme.dropbox.css" >
2014-09-27 16:35:42 +00:00
< link class = "theme" rel = "stylesheet" href = "../css/theme.metro-dark.css" >
2013-11-25 12:59:30 +00:00
2014-11-27 03:22:15 +00:00
< style >
#main h3 { margin-top: 20px; }
#main .accordion h3 { margin-top: 0; }
< / style >
2013-12-08 20:02:02 +00:00
< style id = "css" > / * w r a p p e r o f t a b l e 2 * /
.wrapper {
position: relative;
top: 50px;
height: 250px;
overflow-x: auto;
2014-11-27 03:22:15 +00:00
}
/* Magnific popup */
#popup {
position: relative;
background: #FFF;
padding: 20px;
width: auto;
max-width: 500px;
margin: 20px auto;
2013-12-08 20:02:02 +00:00
}< / style >
2013-11-25 12:59:30 +00:00
<!-- Tablesorter script: required -->
< script src = "../js/jquery.tablesorter.js" > < / script >
< script src = "../js/jquery.tablesorter.widgets.js" > < / script >
< script src = "../js/widgets/widget-cssStickyHeaders.js" > < / script >
< script id = "js" > $ ( f u n c t i o n ( ) {
2014-11-27 03:22:15 +00:00
$('.open-popup-link').magnificPopup({
type: 'inline',
midClick: true,
callbacks: {
open: function () {
// Will fire when this exact popup is opened
// this - is Magnific Popup object
$('#table0').tablesorter({
theme: 'blue',
headerTemplate : '{content} {icon}', // Add icon for various themes
widgets: ['zebra', 'filter', 'cssStickyHeaders'],
widgetOptions: {
// jQuery selector or object to attach sticky header to
cssStickyHeaders_attachTo: '.mfp-wrap',
stickyHeaders_offset: 0,
// caption set by demo button value
cssStickyHeaders_addCaption: addCaption
}
});
}
}
});
$('#table1, .nested, #table3').tablesorter({
2013-11-25 12:59:30 +00:00
widthFixed : true,
headerTemplate: '{content} {icon}', // Add icon for jui theme; new in v2.7!
2014-05-21 22:09:23 +00:00
widgets: [ 'zebra', 'cssStickyHeaders', 'filter' ],
2013-11-25 12:59:30 +00:00
widgetOptions: {
2014-05-05 18:25:37 +00:00
cssStickyHeaders_offset : 0,
cssStickyHeaders_addCaption : true,
2014-10-09 21:04:28 +00:00
// jQuery selector or object to attach sticky header to
2014-05-05 18:25:37 +00:00
cssStickyHeaders_attachTo : null,
cssStickyHeaders_filteredToTop : true,
cssStickyHeaders_zIndex : 10
2013-11-25 12:59:30 +00:00
}
2014-10-09 21:04:28 +00:00
});
2013-12-08 20:02:02 +00:00
2014-11-27 03:22:15 +00:00
$('#table2').tablesorter({
2014-10-09 21:04:28 +00:00
widthFixed : true,
headerTemplate: '{content} {icon}', // Add icon for jui theme; new in v2.7!
widgets: [ 'zebra', 'cssStickyHeaders', 'filter' ],
2013-12-08 20:02:02 +00:00
2014-10-09 21:04:28 +00:00
widgetOptions: {
cssStickyHeaders_attachTo : '.wrapper', // or $('.wrapper')
cssStickyHeaders_addCaption : true
}
});
2013-11-25 12:59:30 +00:00
});< / script >
< script >
$(function() {
2014-05-21 22:09:23 +00:00
$('link.theme').each(function(){ this.disabled = true; });
2013-11-25 12:59:30 +00:00
var themes = 'default blue green grey ice black-ice dark dropbox',
i, o = '', t = themes.split(' ');
for (i = 0; i < t.length ; i + + ) {
2014-10-09 21:04:28 +00:00
o += '< option value = "' + t[i] + '" > ' + t[i] + '< / option > ';
2013-11-25 12:59:30 +00:00
}
$('select:first')
.append(o)
.change(function(){
var theme = $(this).val().toLowerCase(),
2014-05-21 22:09:23 +00:00
files = $('link.theme').each(function(){
2013-11-25 12:59:30 +00:00
this.disabled = true;
})
2014-05-21 22:09:23 +00:00
files.filter('[href$="theme.' + theme + '.css"]').each(function(){
2013-11-25 12:59:30 +00:00
this.disabled = false;
});
$('table')
.removeClass('tablesorter-' + t.join(' tablesorter-') + ' tablesorter-jui')
2014-10-09 21:04:28 +00:00
.addClass('tablesorter-' + (theme === 'black-ice' ? 'blackice' : theme) );
2013-11-25 12:59:30 +00:00
}).change();
2014-10-30 15:38:30 +00:00
2014-11-27 03:22:15 +00:00
window.addCaption = true;
2014-10-30 15:38:30 +00:00
$('.caption').on('click', function(){
addCaption = !addCaption;
$(this).html( '' + addCaption );
2014-11-27 03:22:15 +00:00
$('#table0, #table1, #table2, #table3, .nested').each(function(){
if (this.config) {
this.config.widgetOptions.cssStickyHeaders_addCaption = addCaption;
}
2014-10-30 15:38:30 +00:00
});
});
2014-11-27 03:22:15 +00:00
2013-11-25 12:59:30 +00:00
});
< / script >
< / head >
< body >
< div id = "banner" >
< h1 > table< em > sorter< / em > < / h1 >
2013-12-08 20:02:02 +00:00
< h2 > CSS Sticky Header Widget< / h2 >
2013-11-25 12:59:30 +00:00
< h3 > Flexible client-side table sorting< / h3 >
< a href = "index.html" > Back to documentation< / a >
< / div >
< div id = "main" >
2014-05-05 18:25:37 +00:00
< p > < / p >
< br >
< div id = "root" class = "accordion" >
< h3 > < a href = "#" > Notes< / a > < / h3 >
< div >
2013-11-25 12:59:30 +00:00
< ul >
2014-11-27 03:22:15 +00:00
< li > In < span class = "version" > v2.18.4< / span > , added a < a href = "http://dimsemenov.com/plugins/magnific-popup/" > Magnific popup< / a > example to this page.< / li >
2014-10-30 15:38:30 +00:00
< li > In < span class = "version" > v2.18.1< / span > , < code > cssStickyHeaders_addCaption< / code > issue fixed & nested tables in IE now work properly.< / li >
2014-10-09 21:04:28 +00:00
< li > This demo uses the CSS Sticky Headers widget which uses < em > CSS transforms< / em > to reposition the table head.< / li >
< li > < a href = "http://caniuse.com/#search=transform" > CSS transforms< / a > are supported by most modern browsers (< strong > not IE8 and older< / strong > ).< / li >
< li > The jQuery UI themed table does not stick to the top of the page due to the extra padding. Adjust the < code > cssStickyHeaders_offset< / code > option as desired. I didn't bother in this demo because it includes more than just the jQuery UI theme.< br > < br > < / li >
2014-10-30 15:38:30 +00:00
< li > This widget < em > will not work< / em > with the original tablesorter, but works optimally with tablesorter v2.8+ (Added < span class = "version" > v2.14.1< / span > ; Updated < span class = "version updated" > v2.18.1< / span > )< / li >
2014-05-05 18:25:37 +00:00
< / ul >
< / div >
< h3 > < a href = "#" > Change log< / a > < / h3 >
< div >
< ul >
2014-10-30 15:38:30 +00:00
< li > < span class = "version" > v2.18.1< / span > :
< ul >
< li > Nested css sticky headers in IE now work as expected< / li >
< li > Fixed an issue in Chrome where the height of the caption was still included even though the < code > cssStickyHeaders_addCaption< / code > was set to < code > false< / code > .< / li >
< / ul >
< / li >
2014-10-09 21:04:28 +00:00
< li > < span class = "version" > v2.18.0< / span > :
< ul >
< li > Nested css sticky headers now stack; except in IE< / li >
< li > Removed < code > cssStickyHeaders_zIndex< / code > because the headers are not positioned.< / li >
< / ul >
< / li >
< li > < span class = "version" > v2.16.4< / span > :
< ul >
< li > Added the < code > cssStickyHeaders_filteredToTop< / code > option.
< ul >
< li > When < code > true< / code > the table top will scroll into view after being filtered.< / li >
< li > This is done because if the sticky header is active, and a filter results in say only one row, the table will scroll up out of the browser viewport.< / li >
< li > If set to < code > false< / code > , no scrolling is done.< / li >
< / ul >
< / li >
< / ul >
< / li >
< li > < span class = "version" > v2.14.4< / span > :
2013-12-08 20:02:02 +00:00
< ul >
< li > Added < code > cssStickyHeaders_attachTo< / code > (default set to < code > null< / code > ). Setting this option with either a jQuery selector string (< code > " .wrapper" < / code > ) or jQuery object (< code > $(" .wrapper" )< / code > ) to attach the sticky header to this element - see the second example below.< / li >
2014-10-09 21:04:28 +00:00
< li > Removed < code > cssStickyHeaders_offsetX< / code > option.< / li >
< li > Renamed < code > cssStickyHeaders_offsetY< / code > to < code > cssStickyHeaders_offset< / code > as the horizontal offset is not required.< / li >
< / ul >
2013-12-08 20:02:02 +00:00
< / li >
2014-10-09 21:04:28 +00:00
< li > v2.14.1: Created css Sticky Headers widget< / li >
2013-11-25 12:59:30 +00:00
< / ul >
2014-05-05 18:25:37 +00:00
< / div >
< / div >
< p >
2013-11-25 12:59:30 +00:00
2013-12-08 20:02:02 +00:00
< h1 > CSS< / h1 >
< div id = "css" >
< pre class = "prettyprint lang-css" > < / pre >
< / div >
2013-11-25 12:59:30 +00:00
< h1 > Javascript< / h1 >
< div id = "javascript" >
< pre class = "prettyprint lang-javascript" > < / pre >
< / div >
< h1 > Demo< / h1 >
2014-10-30 15:38:30 +00:00
Choose Theme: < select > < / select >
< p > < / p >
Include Caption: < button type = "button" class = "caption" > true< / button >
< p > < / p >
2014-11-27 03:22:15 +00:00
< h3 > Sticky headers in a popup window< / h3 >
< a href = "#popup" class = "open-popup-link" > Show table in Magnific popup window< / a >
< div id = "popup" class = "white-popup mfp-hide" >
< table id = "table0" class = "tablesorter" >
< caption > Student Grades< / caption >
< thead >
< tr > < th > Name< / th > < th > Major< / th > < th > Sex< / th > < th > English< / th > < th > Japanese< / th > < th > Calculus< / th > < th class = "filter-false sorter-false" > Geometry< / th > < / tr >
< / thead >
< tfoot >
< tr > < th > Name< / th > < th > Major< / th > < th > Sex< / th > < th > English< / th > < th > Japanese< / th > < th > Calculus< / th > < th > Geometry< / th > < / tr >
< / tfoot >
< tbody >
< tr > < td > Student01< / td > < td > Languages< / td > < td > male< / td > < td > 80< / td > < td > 70< / td > < td > 75< / td > < td > 80< / td > < / tr >
< tr > < td > Student02< / td > < td > Mathematics< / td > < td > male< / td > < td > 90< / td > < td > 88< / td > < td > 100< / td > < td > 90< / td > < / tr >
< tr > < td > Student03< / td > < td > Languages< / td > < td > female< / td > < td > 85< / td > < td > 95< / td > < td > 80< / td > < td > 85< / td > < / tr >
< tr > < td > Student04< / td > < td > Languages< / td > < td > male< / td > < td > 60< / td > < td > 55< / td > < td > 100< / td > < td > 100< / td > < / tr >
< tr > < td > Student05< / td > < td > Languages< / td > < td > female< / td > < td > 68< / td > < td > 80< / td > < td > 95< / td > < td > 80< / td > < / tr >
< tr > < td > Student06< / td > < td > Mathematics< / td > < td > male< / td > < td > 100< / td > < td > 99< / td > < td > 100< / td > < td > 90< / td > < / tr >
< tr > < td > Student07< / td > < td > Mathematics< / td > < td > male< / td > < td > 85< / td > < td > 68< / td > < td > 90< / td > < td > 90< / td > < / tr >
< tr > < td > Student08< / td > < td > Languages< / td > < td > male< / td > < td > 100< / td > < td > 90< / td > < td > 90< / td > < td > 85< / td > < / tr >
< tr > < td > Student09< / td > < td > Mathematics< / td > < td > male< / td > < td > 80< / td > < td > 50< / td > < td > 65< / td > < td > 75< / td > < / tr >
< tr > < td > Student10< / td > < td > Languages< / td > < td > male< / td > < td > 85< / td > < td > 100< / td > < td > 100< / td > < td > 90< / td > < / tr >
< tr > < td > Student11< / td > < td > Languages< / td > < td > male< / td > < td > 86< / td > < td > 85< / td > < td > 100< / td > < td > 100< / td > < / tr >
< tr > < td > Student12< / td > < td > Mathematics< / td > < td > female< / td > < td > 100< / td > < td > 75< / td > < td > 70< / td > < td > 85< / td > < / tr >
< tr > < td > Student13< / td > < td > Languages< / td > < td > female< / td > < td > 100< / td > < td > 80< / td > < td > 100< / td > < td > 90< / td > < / tr >
< tr > < td > Student14< / td > < td > Languages< / td > < td > female< / td > < td > 50< / td > < td > 45< / td > < td > 55< / td > < td > 90< / td > < / tr >
< tr > < td > Student15< / td > < td > Languages< / td > < td > male< / td > < td > 95< / td > < td > 35< / td > < td > 100< / td > < td > 90< / td > < / tr >
< tr > < td > Student16< / td > < td > Languages< / td > < td > female< / td > < td > 100< / td > < td > 50< / td > < td > 30< / td > < td > 70< / td > < / tr >
< tr > < td > Student17< / td > < td > Languages< / td > < td > female< / td > < td > 80< / td > < td > 100< / td > < td > 55< / td > < td > 65< / td > < / tr >
< tr > < td > Student18< / td > < td > Mathematics< / td > < td > male< / td > < td > 30< / td > < td > 49< / td > < td > 55< / td > < td > 75< / td > < / tr >
< tr > < td > Student19< / td > < td > Languages< / td > < td > male< / td > < td > 68< / td > < td > 90< / td > < td > 88< / td > < td > 70< / td > < / tr >
< tr > < td > Student20< / td > < td > Mathematics< / td > < td > male< / td > < td > 40< / td > < td > 45< / td > < td > 40< / td > < td > 80< / td > < / tr >
< tr > < td > Student21< / td > < td > Languages< / td > < td > male< / td > < td > 50< / td > < td > 45< / td > < td > 100< / td > < td > 100< / td > < / tr >
< tr > < td > Student22< / td > < td > Mathematics< / td > < td > male< / td > < td > 100< / td > < td > 99< / td > < td > 100< / td > < td > 90< / td > < / tr >
< tr > < td > Student23< / td > < td > Languages< / td > < td > female< / td > < td > 85< / td > < td > 80< / td > < td > 80< / td > < td > 80< / td > < / tr >
< tr > < td > student23< / td > < td > Mathematics< / td > < td > male< / td > < td > 82< / td > < td > 77< / td > < td > 0< / td > < td > 79< / td > < / tr >
< tr > < td > student24< / td > < td > Languages< / td > < td > female< / td > < td > 100< / td > < td > 91< / td > < td > 13< / td > < td > 82< / td > < / tr >
< tr > < td > student25< / td > < td > Mathematics< / td > < td > male< / td > < td > 22< / td > < td > 96< / td > < td > 82< / td > < td > 53< / td > < / tr >
< tr > < td > student26< / td > < td > Languages< / td > < td > female< / td > < td > 37< / td > < td > 29< / td > < td > 56< / td > < td > 59< / td > < / tr >
< tr > < td > student27< / td > < td > Mathematics< / td > < td > male< / td > < td > 86< / td > < td > 82< / td > < td > 69< / td > < td > 23< / td > < / tr >
< tr > < td > student28< / td > < td > Languages< / td > < td > female< / td > < td > 44< / td > < td > 25< / td > < td > 43< / td > < td > 1< / td > < / tr >
< tr > < td > student29< / td > < td > Mathematics< / td > < td > male< / td > < td > 77< / td > < td > 47< / td > < td > 22< / td > < td > 38< / td > < / tr >
< tr > < td > student30< / td > < td > Languages< / td > < td > female< / td > < td > 19< / td > < td > 35< / td > < td > 23< / td > < td > 10< / td > < / tr >
< tr > < td > student31< / td > < td > Mathematics< / td > < td > male< / td > < td > 90< / td > < td > 27< / td > < td > 17< / td > < td > 50< / td > < / tr >
< tr > < td > student32< / td > < td > Languages< / td > < td > female< / td > < td > 60< / td > < td > 75< / td > < td > 33< / td > < td > 38< / td > < / tr >
< tr > < td > student33< / td > < td > Mathematics< / td > < td > male< / td > < td > 4< / td > < td > 31< / td > < td > 37< / td > < td > 15< / td > < / tr >
< tr > < td > student34< / td > < td > Languages< / td > < td > female< / td > < td > 77< / td > < td > 97< / td > < td > 81< / td > < td > 44< / td > < / tr >
< tr > < td > student35< / td > < td > Mathematics< / td > < td > male< / td > < td > 5< / td > < td > 81< / td > < td > 51< / td > < td > 95< / td > < / tr >
< tr > < td > student36< / td > < td > Languages< / td > < td > female< / td > < td > 70< / td > < td > 61< / td > < td > 70< / td > < td > 94< / td > < / tr >
< tr > < td > student37< / td > < td > Mathematics< / td > < td > male< / td > < td > 60< / td > < td > 3< / td > < td > 61< / td > < td > 84< / td > < / tr >
< tr > < td > student38< / td > < td > Languages< / td > < td > female< / td > < td > 63< / td > < td > 39< / td > < td > 0< / td > < td > 11< / td > < / tr >
< tr > < td > student39< / td > < td > Mathematics< / td > < td > male< / td > < td > 50< / td > < td > 46< / td > < td > 32< / td > < td > 38< / td > < / tr >
< tr > < td > student40< / td > < td > Languages< / td > < td > female< / td > < td > 51< / td > < td > 75< / td > < td > 25< / td > < td > 3< / td > < / tr >
< tr > < td > student41< / td > < td > Mathematics< / td > < td > male< / td > < td > 43< / td > < td > 34< / td > < td > 28< / td > < td > 78< / td > < / tr >
< tr > < td > student42< / td > < td > Languages< / td > < td > female< / td > < td > 11< / td > < td > 89< / td > < td > 60< / td > < td > 95< / td > < / tr >
< tr > < td > student43< / td > < td > Mathematics< / td > < td > male< / td > < td > 48< / td > < td > 92< / td > < td > 18< / td > < td > 88< / td > < / tr >
< tr > < td > student44< / td > < td > Languages< / td > < td > female< / td > < td > 82< / td > < td > 2< / td > < td > 59< / td > < td > 73< / td > < / tr >
< tr > < td > student45< / td > < td > Mathematics< / td > < td > male< / td > < td > 91< / td > < td > 73< / td > < td > 37< / td > < td > 39< / td > < / tr >
< tr > < td > student46< / td > < td > Languages< / td > < td > female< / td > < td > 4< / td > < td > 8< / td > < td > 12< / td > < td > 10< / td > < / tr >
< tr > < td > student47< / td > < td > Mathematics< / td > < td > male< / td > < td > 89< / td > < td > 10< / td > < td > 6< / td > < td > 11< / td > < / tr >
< tr > < td > student48< / td > < td > Languages< / td > < td > female< / td > < td > 90< / td > < td > 32< / td > < td > 21< / td > < td > 18< / td > < / tr >
< tr > < td > student49< / td > < td > Mathematics< / td > < td > male< / td > < td > 42< / td > < td > 49< / td > < td > 49< / td > < td > 72< / td > < / tr >
< tr > < td > student50< / td > < td > Languages< / td > < td > female< / td > < td > 56< / td > < td > 37< / td > < td > 67< / td > < td > 54< / td > < / tr >
< / tbody >
< / table >
< / div >
< br > < br >
< h3 > Attach sticky header to browser window< / h3 >
2013-12-08 20:02:02 +00:00
< table id = "table1" class = "tablesorter" >
< caption > Student Grades< / caption >
2013-11-25 12:59:30 +00:00
< thead >
< tr > < th > Name< / th > < th > Major< / th > < th > Sex< / th > < th > English< / th > < th > Japanese< / th > < th > Calculus< / th > < th class = "filter-false sorter-false" > Geometry< / th > < / tr >
< / thead >
< tfoot >
< tr > < th > Name< / th > < th > Major< / th > < th > Sex< / th > < th > English< / th > < th > Japanese< / th > < th > Calculus< / th > < th > Geometry< / th > < / tr >
< / tfoot >
< tbody >
< tr > < td > Student01< / td > < td > Languages< / td > < td > male< / td > < td > 80< / td > < td > 70< / td > < td > 75< / td > < td > 80< / td > < / tr >
< tr > < td > Student02< / td > < td > Mathematics< / td > < td > male< / td > < td > 90< / td > < td > 88< / td > < td > 100< / td > < td > 90< / td > < / tr >
< tr > < td > Student03< / td > < td > Languages< / td > < td > female< / td > < td > 85< / td > < td > 95< / td > < td > 80< / td > < td > 85< / td > < / tr >
< tr > < td > Student04< / td > < td > Languages< / td > < td > male< / td > < td > 60< / td > < td > 55< / td > < td > 100< / td > < td > 100< / td > < / tr >
< tr > < td > Student05< / td > < td > Languages< / td > < td > female< / td > < td > 68< / td > < td > 80< / td > < td > 95< / td > < td > 80< / td > < / tr >
< tr > < td > Student06< / td > < td > Mathematics< / td > < td > male< / td > < td > 100< / td > < td > 99< / td > < td > 100< / td > < td > 90< / td > < / tr >
< tr > < td > Student07< / td > < td > Mathematics< / td > < td > male< / td > < td > 85< / td > < td > 68< / td > < td > 90< / td > < td > 90< / td > < / tr >
< tr > < td > Student08< / td > < td > Languages< / td > < td > male< / td > < td > 100< / td > < td > 90< / td > < td > 90< / td > < td > 85< / td > < / tr >
< tr > < td > Student09< / td > < td > Mathematics< / td > < td > male< / td > < td > 80< / td > < td > 50< / td > < td > 65< / td > < td > 75< / td > < / tr >
< tr > < td > Student10< / td > < td > Languages< / td > < td > male< / td > < td > 85< / td > < td > 100< / td > < td > 100< / td > < td > 90< / td > < / tr >
< tr > < td > Student11< / td > < td > Languages< / td > < td > male< / td > < td > 86< / td > < td > 85< / td > < td > 100< / td > < td > 100< / td > < / tr >
< tr > < td > Student12< / td > < td > Mathematics< / td > < td > female< / td > < td > 100< / td > < td > 75< / td > < td > 70< / td > < td > 85< / td > < / tr >
< tr > < td > Student13< / td > < td > Languages< / td > < td > female< / td > < td > 100< / td > < td > 80< / td > < td > 100< / td > < td > 90< / td > < / tr >
< tr > < td > Student14< / td > < td > Languages< / td > < td > female< / td > < td > 50< / td > < td > 45< / td > < td > 55< / td > < td > 90< / td > < / tr >
< tr > < td > Student15< / td > < td > Languages< / td > < td > male< / td > < td > 95< / td > < td > 35< / td > < td > 100< / td > < td > 90< / td > < / tr >
< tr > < td > Student16< / td > < td > Languages< / td > < td > female< / td > < td > 100< / td > < td > 50< / td > < td > 30< / td > < td > 70< / td > < / tr >
< tr > < td > Student17< / td > < td > Languages< / td > < td > female< / td > < td > 80< / td > < td > 100< / td > < td > 55< / td > < td > 65< / td > < / tr >
< tr > < td > Student18< / td > < td > Mathematics< / td > < td > male< / td > < td > 30< / td > < td > 49< / td > < td > 55< / td > < td > 75< / td > < / tr >
< tr > < td > Student19< / td > < td > Languages< / td > < td > male< / td > < td > 68< / td > < td > 90< / td > < td > 88< / td > < td > 70< / td > < / tr >
< tr > < td > Student20< / td > < td > Mathematics< / td > < td > male< / td > < td > 40< / td > < td > 45< / td > < td > 40< / td > < td > 80< / td > < / tr >
< tr > < td > Student21< / td > < td > Languages< / td > < td > male< / td > < td > 50< / td > < td > 45< / td > < td > 100< / td > < td > 100< / td > < / tr >
< tr > < td > Student22< / td > < td > Mathematics< / td > < td > male< / td > < td > 100< / td > < td > 99< / td > < td > 100< / td > < td > 90< / td > < / tr >
< tr > < td > Student23< / td > < td > Languages< / td > < td > female< / td > < td > 85< / td > < td > 80< / td > < td > 80< / td > < td > 80< / td > < / tr >
< tr > < td > student23< / td > < td > Mathematics< / td > < td > male< / td > < td > 82< / td > < td > 77< / td > < td > 0< / td > < td > 79< / td > < / tr >
< tr > < td > student24< / td > < td > Languages< / td > < td > female< / td > < td > 100< / td > < td > 91< / td > < td > 13< / td > < td > 82< / td > < / tr >
< tr > < td > student25< / td > < td > Mathematics< / td > < td > male< / td > < td > 22< / td > < td > 96< / td > < td > 82< / td > < td > 53< / td > < / tr >
< tr > < td > student26< / td > < td > Languages< / td > < td > female< / td > < td > 37< / td > < td > 29< / td > < td > 56< / td > < td > 59< / td > < / tr >
< tr > < td > student27< / td > < td > Mathematics< / td > < td > male< / td > < td > 86< / td > < td > 82< / td > < td > 69< / td > < td > 23< / td > < / tr >
< tr > < td > student28< / td > < td > Languages< / td > < td > female< / td > < td > 44< / td > < td > 25< / td > < td > 43< / td > < td > 1< / td > < / tr >
< tr > < td > student29< / td > < td > Mathematics< / td > < td > male< / td > < td > 77< / td > < td > 47< / td > < td > 22< / td > < td > 38< / td > < / tr >
< tr > < td > student30< / td > < td > Languages< / td > < td > female< / td > < td > 19< / td > < td > 35< / td > < td > 23< / td > < td > 10< / td > < / tr >
< tr > < td > student31< / td > < td > Mathematics< / td > < td > male< / td > < td > 90< / td > < td > 27< / td > < td > 17< / td > < td > 50< / td > < / tr >
< tr > < td > student32< / td > < td > Languages< / td > < td > female< / td > < td > 60< / td > < td > 75< / td > < td > 33< / td > < td > 38< / td > < / tr >
< tr > < td > student33< / td > < td > Mathematics< / td > < td > male< / td > < td > 4< / td > < td > 31< / td > < td > 37< / td > < td > 15< / td > < / tr >
< tr > < td > student34< / td > < td > Languages< / td > < td > female< / td > < td > 77< / td > < td > 97< / td > < td > 81< / td > < td > 44< / td > < / tr >
< tr > < td > student35< / td > < td > Mathematics< / td > < td > male< / td > < td > 5< / td > < td > 81< / td > < td > 51< / td > < td > 95< / td > < / tr >
< tr > < td > student36< / td > < td > Languages< / td > < td > female< / td > < td > 70< / td > < td > 61< / td > < td > 70< / td > < td > 94< / td > < / tr >
< tr > < td > student37< / td > < td > Mathematics< / td > < td > male< / td > < td > 60< / td > < td > 3< / td > < td > 61< / td > < td > 84< / td > < / tr >
< tr > < td > student38< / td > < td > Languages< / td > < td > female< / td > < td > 63< / td > < td > 39< / td > < td > 0< / td > < td > 11< / td > < / tr >
< tr > < td > student39< / td > < td > Mathematics< / td > < td > male< / td > < td > 50< / td > < td > 46< / td > < td > 32< / td > < td > 38< / td > < / tr >
< tr > < td > student40< / td > < td > Languages< / td > < td > female< / td > < td > 51< / td > < td > 75< / td > < td > 25< / td > < td > 3< / td > < / tr >
< tr > < td > student41< / td > < td > Mathematics< / td > < td > male< / td > < td > 43< / td > < td > 34< / td > < td > 28< / td > < td > 78< / td > < / tr >
< tr > < td > student42< / td > < td > Languages< / td > < td > female< / td > < td > 11< / td > < td > 89< / td > < td > 60< / td > < td > 95< / td > < / tr >
< tr > < td > student43< / td > < td > Mathematics< / td > < td > male< / td > < td > 48< / td > < td > 92< / td > < td > 18< / td > < td > 88< / td > < / tr >
< tr > < td > student44< / td > < td > Languages< / td > < td > female< / td > < td > 82< / td > < td > 2< / td > < td > 59< / td > < td > 73< / td > < / tr >
< tr > < td > student45< / td > < td > Mathematics< / td > < td > male< / td > < td > 91< / td > < td > 73< / td > < td > 37< / td > < td > 39< / td > < / tr >
< tr > < td > student46< / td > < td > Languages< / td > < td > female< / td > < td > 4< / td > < td > 8< / td > < td > 12< / td > < td > 10< / td > < / tr >
< tr > < td > student47< / td > < td > Mathematics< / td > < td > male< / td > < td > 89< / td > < td > 10< / td > < td > 6< / td > < td > 11< / td > < / tr >
< tr > < td > student48< / td > < td > Languages< / td > < td > female< / td > < td > 90< / td > < td > 32< / td > < td > 21< / td > < td > 18< / td > < / tr >
< tr > < td > student49< / td > < td > Mathematics< / td > < td > male< / td > < td > 42< / td > < td > 49< / td > < td > 49< / td > < td > 72< / td > < / tr >
< tr > < td > student50< / td > < td > Languages< / td > < td > female< / td > < td > 56< / td > < td > 37< / td > < td > 67< / td > < td > 54< / td > < / tr >
< / tbody >
< / table >
2014-11-27 03:22:15 +00:00
< h3 > Attach sticky header to its parent< / h3 >
2013-12-08 20:02:02 +00:00
< div class = "narrow-block wrapper" >
< table id = "table2" class = "tablesorter" >
< caption > Student Grades< / caption >
2013-11-25 12:59:30 +00:00
< thead >
< tr > < th > Account #< / th > < th > First Name< / th > < th > Last Name< / th > < th > Age< / th > < th > Total< / th > < th > Discount< / th > < th > Diff< / th > < / tr >
< / thead >
< tbody >
< tr > < td > A43< / td > < td > Peter< / td > < td > Parker< / td > < td > 28< / td > < td > 9.99< / td > < td > 20.3%< / td > < td > +3< / td > < / tr >
< tr > < td > A255< / td > < td > John< / td > < td > Hood< / td > < td > 33< / td > < td > 19.99< / td > < td > 25.1%< / td > < td > -7< / td > < / tr >
< tr > < td > A33< / td > < td > Clark< / td > < td > Kent< / td > < td > 18< / td > < td > 15.49< / td > < td > 44.2%< / td > < td > -13< / td > < / tr >
< tr > < td > A11< / td > < td > Bruce< / td > < td > Almighty< / td > < td > 45< / td > < td > 153.19< / td > < td > 44%< / td > < td > +19< / td > < / tr >
< tr > < td > A102< / td > < td > Bruce< / td > < td > Evans< / td > < td > 56< / td > < td > 153.19< / td > < td > 23%< / td > < td > +9< / td > < / tr >
< tr > < td > A23< / td > < td > Mike< / td > < td > Peters< / td > < td > 22< / td > < td > 5.69< / td > < td > 20.3%< / td > < td > +2< / td > < / tr >
< tr > < td > A55< / td > < td > Leslie< / td > < td > Kent< / td > < td > 33< / td > < td > 15.99< / td > < td > 25.1%< / td > < td > -3< / td > < / tr >
< tr > < td > A3< / td > < td > Frank< / td > < td > Mint< / td > < td > 44< / td > < td > 12.59< / td > < td > 44.2%< / td > < td > -12< / td > < / tr >
< tr > < td > A21< / td > < td > Joe< / td > < td > Thomas< / td > < td > 45< / td > < td > 15.25< / td > < td > 44%< / td > < td > +12< / td > < / tr >
< tr > < td > A12< / td > < td > Tess< / td > < td > Evans< / td > < td > 66< / td > < td > 13.59< / td > < td > 23%< / td > < td > +4< / td > < / tr >
< tr > < td > A21< / td > < td > Peter< / td > < td > Dunn< / td > < td > 12< / td > < td > 2.99< / td > < td > 21.1%< / td > < td > +2< / td > < / tr >
< tr > < td > A33< / td > < td > Harry< / td > < td > Jones< / td > < td > 13< / td > < td > 19.49< / td > < td > 22.2%< / td > < td > -6< / td > < / tr >
< tr > < td > A13< / td > < td > John< / td > < td > James< / td > < td > 16< / td > < td > 13.89< / td > < td > 42.1%< / td > < td > -13< / td > < / tr >
< tr > < td > A71< / td > < td > Nick< / td > < td > Parker< / td > < td > 45< / td > < td > 13.89< / td > < td > 44%< / td > < td > +29< / td > < / tr >
< tr > < td > A21< / td > < td > Charles< / td > < td > Dunn< / td > < td > 19< / td > < td > 15.49< / td > < td > 22%< / td > < td > +3< / td > < / tr >
< / tbody >
< / table >
< / div >
2014-10-09 21:04:28 +00:00
2014-11-27 03:22:15 +00:00
< h3 > Nested sticky header tables< / h3 >
2014-10-09 21:04:28 +00:00
< table id = "table3" class = "tablesorter" >
< thead >
< tr >
< th > Main table header< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > Main table - row 1< / td >
< / tr >
< tr >
< td > Main table - row 2< / td >
< / tr >
< tr >
< td >
2014-10-30 15:38:30 +00:00
Main table - row 3 (with nested table 1)
2014-10-09 21:04:28 +00:00
< table id = "nested1" class = "nested" >
< thead >
< tr >
< th > Header for the nested table 1< / th >
< / tr >
< tr >
< th class = "sorter-false" > Second header row for nested table 1< / th >
< / tr >
< / thead >
< tbody >
< tr > < td > data in the nested table 1 - row 1< / td > < / tr >
< tr > < td > data in the nested table 1 - row 2< / td > < / tr >
< tr > < td > data in the nested table 1 - row 3< / td > < / tr >
< tr > < td > data in the nested table 1 - row 4< / td > < / tr >
< tr > < td > data in the nested table 1 - row 5< / td > < / tr >
< tr >
< td >
2014-10-30 15:38:30 +00:00
data in the nested table 1 - row 6 (with nested table 2)
2014-10-09 21:04:28 +00:00
< table id = "nested2" class = "nested" >
< caption class = "dark-row" > Nested table 2 caption< / caption >
< thead >
< tr >
< th > Header for the nested table 2< / th >
< / tr >
< tr >
< th class = "sorter-false" > Second header row for nested table 2< / th >
< / tr >
< / thead >
< tbody >
< tr > < td > data in the nested table 2 - row 1< / td > < / tr >
< tr > < td > data in the nested table 2 - row 2< / td > < / tr >
< tr > < td > data in the nested table 2 - row 3< / td > < / tr >
< tr > < td > data in the nested table 2 - row 4< / td > < / tr >
< tr > < td > data in the nested table 2 - row 5< / td > < / tr >
< tr > < td > data in the nested table 2 - row 6< / td > < / tr >
< tr > < td > data in the nested table 2 - row 7< / td > < / tr >
< tr > < td > data in the nested table 2 - row 8< / td > < / tr >
< tr > < td > data in the nested table 2 - row 9< / td > < / tr >
< tr > < td > data in the nested table 2 - row 10< / td > < / tr >
< tr > < td > data in the nested table 2 - row 11< / td > < / tr >
< tr > < td > data in the nested table 2 - row 12< / td > < / tr >
< tr > < td > data in the nested table 2 - row 13< / td > < / tr >
< tr > < td > data in the nested table 2 - row 14< / td > < / tr >
< tr > < td > data in the nested table 2 - row 15< / td > < / tr >
< tr > < td > data in the nested table 2 - row 16< / td > < / tr >
< tr > < td > data in the nested table 2 - row 17< / td > < / tr >
< tr > < td > data in the nested table 2 - row 18< / td > < / tr >
< tr > < td > data in the nested table 2 - row 19< / td > < / tr >
< tr > < td > data in the nested table 2 - row 20< / td > < / tr >
< / tbody >
< / table >
< / td >
< / tr >
< tr > < td > data in the nested table 1 - row 7< / td > < / tr >
< tr > < td > data in the nested table 1 - row 8< / td > < / tr >
< tr > < td > data in the nested table 1 - row 9< / td > < / tr >
< tr > < td > data in the nested table 1 - row 10< / td > < / tr >
< tr > < td > data in the nested table 1 - row 11< / td > < / tr >
< tr > < td > data in the nested table 1 - row 12< / td > < / tr >
< tr > < td > data in the nested table 1 - row 13< / td > < / tr >
< tr > < td > data in the nested table 1 - row 14< / td > < / tr >
< tr > < td > data in the nested table 1 - row 15< / td > < / tr >
< tr > < td > data in the nested table 1 - row 16< / td > < / tr >
< tr > < td > data in the nested table 1 - row 17< / td > < / tr >
< tr > < td > data in the nested table 1 - row 18< / td > < / tr >
< tr > < td > data in the nested table 1 - row 19< / td > < / tr >
< tr > < td > data in the nested table 1 - row 20< / td > < / tr >
2014-10-30 15:38:30 +00:00
< tr > < td > data in the nested table 1 - row 21< / td > < / tr >
2014-10-09 21:04:28 +00:00
< / tbody >
< / table >
< / td >
< / tr >
< tr >
2014-10-30 15:38:30 +00:00
< td > Main table - row 4< / td >
2014-10-09 21:04:28 +00:00
< / tr >
< tr >
< td >
2014-10-30 15:38:30 +00:00
Main table - row 5 (with nested table 3)
2014-10-09 21:04:28 +00:00
< table id = "nested3" class = "nested" >
< caption class = "dark-row" > Nested table 3 caption< / caption >
< thead >
< tr >
< th > Header for the nested table 3< / th >
< / tr >
< / thead >
< tbody >
< tr > < td > data in the nested table 3 - row 1< / td > < / tr >
< tr > < td > data in the nested table 3 - row 2< / td > < / tr >
< tr > < td > data in the nested table 3 - row 3< / td > < / tr >
< tr > < td > data in the nested table 3 - row 4< / td > < / tr >
< tr > < td > data in the nested table 3 - row 5< / td > < / tr >
< tr > < td > data in the nested table 3 - row 6< / td > < / tr >
< tr > < td > data in the nested table 3 - row 7< / td > < / tr >
< tr > < td > data in the nested table 3 - row 8< / td > < / tr >
< tr > < td > data in the nested table 3 - row 9< / td > < / tr >
< tr > < td > data in the nested table 3 - row 10< / td > < / tr >
< tr > < td > data in the nested table 3 - row 11< / td > < / tr >
< tr > < td > data in the nested table 3 - row 12< / td > < / tr >
< tr > < td > data in the nested table 3 - row 13< / td > < / tr >
< tr > < td > data in the nested table 3 - row 14< / td > < / tr >
< tr > < td > data in the nested table 3 - row 15< / td > < / tr >
< tr > < td > data in the nested table 3 - row 16< / td > < / tr >
< tr > < td > data in the nested table 3 - row 17< / td > < / tr >
< tr > < td > data in the nested table 3 - row 18< / td > < / tr >
< tr > < td > data in the nested table 3 - row 19< / td > < / tr >
< tr > < td > data in the nested table 3 - row 20< / td > < / tr >
< / tbody >
< / table >
< / td >
< / tr >
< tr >
2014-10-30 15:38:30 +00:00
< td > Main table - row 6< / td >
2014-10-09 21:04:28 +00:00
< / tr >
< / tbody >
< / table >
2013-11-25 12:59:30 +00:00
< div class = "spacer" > < / div >
< / div >
< / body >
< / html >
