Notes

  • 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.2; Updated v2.14.4)

Change log

  • In 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 setn to false, no scrolling is done.
  • In 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.

CSS


	

Javascript


	

Demo

Choose Theme:

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