• In v2.18.4, added a Magnific popup example to this page. Note Please take note of the extra css needed to keep the sticky header aligned.
  • In v2.18.0,
    • Nested tables with sticky headers now stack properly. See the new example added to the bottom of this demo page.
    • Added stickyHeaders_xScroll and stickyHeaders_yScroll widget options.
    • Any defined onRenderHeader function is now executed on the cloned sticky header table cells; the onRenderTemplate function is not! See the change log section for more details.

  • Note To access the added sticky table content from your code without worrying about using the ID, you can use table.config.widgetOptions.$sticky.
  • Note Add the class name sticky-false to any header rows you don't want to become sticky (v2.1.18).

  • You will need to modify the headerTemplate option to include the jQuery UI icon! See the example in the code (v2.7).
  • Scroll down the page to see the headers stick. Then sort the columns using the sticky headers!
  • Multiple rows in the header, including the filter row, will become sticky.
  • As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.
  • Because of the limitations of Internet Explorer version 7 and older, this widget will not work.

CSS

/* wrapper of table 2 */
.wrapper {
  position: relative;
  padding: 0 5px;
  height: 250px;
  overflow-y: auto;
}

/* Magnific popup */
#popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
}
/* Since the popup has a 20px margin, we need to adjust the wrapper position
Note:
 this is only required because we aren't actually attaching the sticky header
 to the #popup, instead we're attaching it to the .mfp-wrap because that
 element scrolls instead of the window
*/
#popup .tablesorter-sticky-wrapper {
  margin-left: 20px;
  margin-top: -20px;
}

Javascript

$(function(){

  $('.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', 'stickyHeaders'],
          widgetOptions: {
            // jQuery selector or object to attach sticky header to
            stickyHeaders_attachTo: '.mfp-wrap',
            stickyHeaders_offset: 0,
            // caption set by demo button value
            stickyHeaders_includeCaption: includeCaption
          }
        });
      }
    }
  });

  $('#table1, .nested, #table3').tablesorter({
    widthFixed : true,
    showProcessing: true,
    headerTemplate : '{content} {icon}', // Add icon for various themes

    widgets: [ 'zebra', 'stickyHeaders', 'filter' ],

    widgetOptions: {

      // extra class name added to the sticky header row
      stickyHeaders : '',
      // number or jquery selector targeting the position:fixed element
      stickyHeaders_offset : 0,
      // added to table ID, if it exists
      stickyHeaders_cloneId : '-sticky',
      // trigger "resize" event on headers
      stickyHeaders_addResizeEvent : true,
      // if false and a caption exist, it won't be included in the sticky header
      stickyHeaders_includeCaption : true,
      // The zIndex of the stickyHeaders, allows the user to adjust this to their needs
      stickyHeaders_zIndex : 2,
      // jQuery selector or object to attach sticky header to
      stickyHeaders_attachTo : null,
      // jQuery selector or object to monitor horizontal scroll position (defaults: xScroll > attachTo > window)
      stickyHeaders_xScroll : null,
      // jQuery selector or object to monitor vertical scroll position (defaults: yScroll > attachTo > window)
      stickyHeaders_yScroll : null,

      // scroll table top into view after filtering
      stickyHeaders_filteredToTop: true

      // *** REMOVED jQuery UI theme due to adding an accordion on this demo page ***
      // adding zebra striping, using content and default styles - the ui css removes the background from default
      // even and odd class names included for this demo to allow switching themes
      // , zebra   : ["ui-widget-content even", "ui-state-default odd"]
      // use uitheme widget to apply defauly jquery ui (jui) class names
      // see the uitheme demo for more details on how to change the class names
      // , uitheme : 'jui'
    }
  });

  /* make second table scroll within its wrapper */
  $('#table2').tablesorter({
    widthFixed : true,
    headerTemplate : '{content} {icon}', // Add icon for various themes

    widgets: [ 'zebra', 'stickyHeaders', 'filter' ],

    widgetOptions: {
      // jQuery selector or object to attach sticky header to
      stickyHeaders_attachTo : '.wrapper' // or $('.wrapper')
    }
  });

});

Demo

Choose Theme:

Include Caption:

Sticky headers in a popup window

Attach sticky header to browser window

Student Grades
Name
Major
Sex
English
Japanese
Calculus
Geometry
NameMajorSexEnglishJapaneseCalculusGeometry
Student01Languagesmale80707580
Student02Mathematicsmale908810090
Student03Languagesfemale85958085
Student04Languagesmale6055100100
Student05Languagesfemale68809580
Student06Mathematicsmale1009910090
Student07Mathematicsmale85689090
Student08Languagesmale100909085
Student09Mathematicsmale80506575
Student10Languagesmale8510010090
Student11Languagesmale8685100100
Student12Mathematicsfemale100757085
Student13Languagesfemale1008010090
Student14Languagesfemale50455590
Student15Languagesmale953510090
Student16Languagesfemale100503070
Student17Languagesfemale801005565
Student18Mathematicsmale30495575
Student19Languagesmale68908870
Student20Mathematicsmale40454080
Student21Languagesmale5045100100
Student22Mathematicsmale1009910090
Student23Languagesfemale85808080
student23Mathematicsmale8277079
student24Languagesfemale100911382
student25Mathematicsmale22968253
student26Languagesfemale37295659
student27Mathematicsmale86826923
student28Languagesfemale4425431
student29Mathematicsmale77472238
student30Languagesfemale19352310
student31Mathematicsmale90271750
student32Languagesfemale60753338
student33Mathematicsmale4313715
student34Languagesfemale77978144
student35Mathematicsmale5815195
student36Languagesfemale70617094
student37Mathematicsmale6036184
student38Languagesfemale6339011
student39Mathematicsmale50463238
student40Languagesfemale5175253
student41Mathematicsmale43342878
student42Languagesfemale11896095
student43Mathematicsmale48921888
student44Languagesfemale8225973
student45Mathematicsmale91733739
student46Languagesfemale481210
student47Mathematicsmale8910611
student48Languagesfemale90322118
student49Mathematicsmale42494972
student50Languagesfemale56376754

Attach sticky header to its parent

Student Grades
Account #
First Name
Last Name
Age
Total
Discount
Diff
A43PeterParker289.9920.3%+3
A255JohnHood3319.9925.1%-7
A33ClarkKent1815.4944.2%-13
A11BruceAlmighty45153.1944%+19
A102BruceEvans56153.1923%+9
A23MikePeters225.6920.3%+2
A55LeslieKent3315.9925.1%-3
A3FrankMint4412.5944.2%-12
A21JoeThomas4515.2544%+12
A12TessEvans6613.5923%+4
A21PeterDunn122.9921.1%+2
A33HarryJones1319.4922.2%-6
A13JohnJames1613.8942.1%-13
A71NickParker4513.8944%+29
A21CharlesDunn1915.4922%+3

Nested sticky header tables

Main table header
Main table - row 1
Main table - row 2
Header for the nested table 1
Second header row for nested table 1
data in the nested table 1 - row 1
data in the nested table 1 - row 2
data in the nested table 1 - row 3
data in the nested table 1 - row 4
data in the nested table 1 - row 5
Nested table 2 caption
Header for the nested table 2
Second header row for nested table 2
data in the nested table 2 - row 1
data in the nested table 2 - row 2
data in the nested table 2 - row 3
data in the nested table 2 - row 4
data in the nested table 2 - row 5
data in the nested table 2 - row 6
data in the nested table 2 - row 7
data in the nested table 2 - row 8
data in the nested table 2 - row 9
data in the nested table 2 - row 10
data in the nested table 2 - row 11
data in the nested table 2 - row 12
data in the nested table 2 - row 13
data in the nested table 2 - row 14
data in the nested table 2 - row 15
data in the nested table 2 - row 16
data in the nested table 2 - row 17
data in the nested table 2 - row 18
data in the nested table 2 - row 19
data in the nested table 2 - row 20
data in the nested table 1 - row 6
data in the nested table 1 - row 7
data in the nested table 1 - row 8
data in the nested table 1 - row 9
data in the nested table 1 - row 10
data in the nested table 1 - row 11
data in the nested table 1 - row 12
data in the nested table 1 - row 13
data in the nested table 1 - row 14
data in the nested table 1 - row 15
data in the nested table 1 - row 16
data in the nested table 1 - row 17
data in the nested table 1 - row 18
data in the nested table 1 - row 19
data in the nested table 1 - row 20
Main table - row 3
Nested table 3 caption
Header for the nested table 3
data in the nested table 3 - row 1
data in the nested table 3 - row 2
data in the nested table 3 - row 3
data in the nested table 3 - row 4
data in the nested table 3 - row 5
data in the nested table 3 - row 6
data in the nested table 3 - row 7
data in the nested table 3 - row 8
data in the nested table 3 - row 9
data in the nested table 3 - row 10
data in the nested table 3 - row 11
data in the nested table 3 - row 12
data in the nested table 3 - row 13
data in the nested table 3 - row 14
data in the nested table 3 - row 15
data in the nested table 3 - row 16
data in the nested table 3 - row 17
data in the nested table 3 - row 18
data in the nested table 3 - row 19
data in the nested table 3 - row 20
Main table - row 4
Next up: Zebra stripe widget ››