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