Notes

  • In v2.18.4, added a Magnific popup example to this page.
  • In v2.18.1, cssStickyHeaders_addCaption issue fixed & nested tables in IE now work properly.
  • This demo uses the CSS Sticky Headers widget which uses CSS transforms to reposition the table head.
  • CSS transforms are supported by most modern browsers (not IE8 and older).
  • The jQuery UI themed table does not stick to the top of the page due to the extra padding. Adjust the cssStickyHeaders_offset option as desired. I didn't bother in this demo because it includes more than just the jQuery UI theme.

  • This widget will not work with the original tablesorter, but works optimally with tablesorter v2.8+ (Added v2.14.1; Updated v2.18.1)

Options

cssStickyHeaders widget defaults

TIP! Click on the link in the function column to reveal full details (or toggle|show|hide all) or double click to update the browser location.
OptionDefaultDescription
cssStickyHeaders_offset 0 Set this to a number (in pixels) or jquery selector targeting the position:fixed element in which to place the sticky header below while scrolling.
cssStickyHeaders_includeCaption true If false and a table caption exist, it won't be included in the sticky header.
null Set this option as a jQuery selector or object where the sticky header will be attached.
  • Setting this option with either a jQuery selector string (".wrapper") or jQuery object ($(".wrapper")).
  • This option contains the target to which the sticky header will attach - see the first example below.
true Scroll table top into view after filtering

This is needed when the user choses to filter the table which results in fewer rows than are currently visible in the browser viewport. So, the sticky header may still exist, but the table body may not be seen. Setting this option to true forces the original table header to scroll back into view.

Change log

  • v2.18.1:
    • Nested css sticky headers in IE now work as expected
    • Fixed an issue in Chrome where the height of the caption was still included even though the cssStickyHeaders_addCaption was set to false.
  • v2.18.0:
    • Nested css sticky headers now stack; except in IE
    • Removed cssStickyHeaders_zIndex because the headers are not positioned.
  • v2.16.4:
    • Added the cssStickyHeaders_filteredToTop option.
      • When true the table top will scroll into view after being filtered.
      • 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.
      • If set to false, no scrolling is done.
  • v2.14.4:
    • Added cssStickyHeaders_attachTo (default set to null). Setting this option with either a jQuery selector string (".wrapper") or jQuery object ($(".wrapper")) to attach the sticky header to this element - see the second example below.
    • Removed cssStickyHeaders_offsetX option.
    • Renamed cssStickyHeaders_offsetY to cssStickyHeaders_offset as the horizontal offset is not required.
  • v2.14.1: Created css Sticky Headers widget

CSS


	

Javascript


	

Demo

Choose Theme:

Include Caption:

Show table in Magnific popup window

Attach sticky header to browser window

Student Grades
NameMajorSexEnglishJapaneseCalculusGeometry
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 NameLast NameAgeTotalDiscountDiff
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
Main table - row 3 (with nested table 1)
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
data in the nested table 1 - row 6 (with nested table 2)
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 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
data in the nested table 1 - row 21
Main table - row 4
Main table - row 5 (with nested table 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 6