jQuery plugin: Tablesorter 2.0 - CSS Sticky Header Widget

# tablesorter

## CSS Sticky Header Widget

### Flexible client-side table sorting

Back to documentation

### 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)

### 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:

### Sticky headers in a popup window

Show table in Magnific popup window

Student Grades
Name | Major | Sex | English | Japanese | Calculus | Geometry
--- | --- | --- | --- | --- | --- | ---
Name | Major | Sex | English | Japanese | Calculus | Geometry
Student01 | Languages | male | 80 | 70 | 75 | 80
Student02 | Mathematics | male | 90 | 88 | 100 | 90
Student03 | Languages | female | 85 | 95 | 80 | 85
Student04 | Languages | male | 60 | 55 | 100 | 100
Student05 | Languages | female | 68 | 80 | 95 | 80
Student06 | Mathematics | male | 100 | 99 | 100 | 90
Student07 | Mathematics | male | 85 | 68 | 90 | 90
Student08 | Languages | male | 100 | 90 | 90 | 85
Student09 | Mathematics | male | 80 | 50 | 65 | 75
Student10 | Languages | male | 85 | 100 | 100 | 90
Student11 | Languages | male | 86 | 85 | 100 | 100
Student12 | Mathematics | female | 100 | 75 | 70 | 85
Student13 | Languages | female | 100 | 80 | 100 | 90
Student14 | Languages | female | 50 | 45 | 55 | 90
Student15 | Languages | male | 95 | 35 | 100 | 90
Student16 | Languages | female | 100 | 50 | 30 | 70
Student17 | Languages | female | 80 | 100 | 55 | 65
Student18 | Mathematics | male | 30 | 49 | 55 | 75
Student19 | Languages | male | 68 | 90 | 88 | 70
Student20 | Mathematics | male | 40 | 45 | 40 | 80
Student21 | Languages | male | 50 | 45 | 100 | 100
Student22 | Mathematics | male | 100 | 99 | 100 | 90
Student23 | Languages | female | 85 | 80 | 80 | 80
student23 | Mathematics | male | 82 | 77 | 0 | 79
student24 | Languages | female | 100 | 91 | 13 | 82
student25 | Mathematics | male | 22 | 96 | 82 | 53
student26 | Languages | female | 37 | 29 | 56 | 59
student27 | Mathematics | male | 86 | 82 | 69 | 23
student28 | Languages | female | 44 | 25 | 43 | 1
student29 | Mathematics | male | 77 | 47 | 22 | 38
student30 | Languages | female | 19 | 35 | 23 | 10
student31 | Mathematics | male | 90 | 27 | 17 | 50
student32 | Languages | female | 60 | 75 | 33 | 38
student33 | Mathematics | male | 4 | 31 | 37 | 15
student34 | Languages | female | 77 | 97 | 81 | 44
student35 | Mathematics | male | 5 | 81 | 51 | 95
student36 | Languages | female | 70 | 61 | 70 | 94
student37 | Mathematics | male | 60 | 3 | 61 | 84
student38 | Languages | female | 63 | 39 | 0 | 11
student39 | Mathematics | male | 50 | 46 | 32 | 38
student40 | Languages | female | 51 | 75 | 25 | 3
student41 | Mathematics | male | 43 | 34 | 28 | 78
student42 | Languages | female | 11 | 89 | 60 | 95
student43 | Mathematics | male | 48 | 92 | 18 | 88
student44 | Languages | female | 82 | 2 | 59 | 73
student45 | Mathematics | male | 91 | 73 | 37 | 39
student46 | Languages | female | 4 | 8 | 12 | 10
student47 | Mathematics | male | 89 | 10 | 6 | 11
student48 | Languages | female | 90 | 32 | 21 | 18
student49 | Mathematics | male | 42 | 49 | 49 | 72
student50 | Languages | female | 56 | 37 | 67 | 54

### Attach sticky header to browser window

Student Grades
Name | Major | Sex | English | Japanese | Calculus | Geometry
--- | --- | --- | --- | --- | --- | ---
Name | Major | Sex | English | Japanese | Calculus | Geometry
Student01 | Languages | male | 80 | 70 | 75 | 80
Student02 | Mathematics | male | 90 | 88 | 100 | 90
Student03 | Languages | female | 85 | 95 | 80 | 85
Student04 | Languages | male | 60 | 55 | 100 | 100
Student05 | Languages | female | 68 | 80 | 95 | 80
Student06 | Mathematics | male | 100 | 99 | 100 | 90
Student07 | Mathematics | male | 85 | 68 | 90 | 90
Student08 | Languages | male | 100 | 90 | 90 | 85
Student09 | Mathematics | male | 80 | 50 | 65 | 75
Student10 | Languages | male | 85 | 100 | 100 | 90
Student11 | Languages | male | 86 | 85 | 100 | 100
Student12 | Mathematics | female | 100 | 75 | 70 | 85
Student13 | Languages | female | 100 | 80 | 100 | 90
Student14 | Languages | female | 50 | 45 | 55 | 90
Student15 | Languages | male | 95 | 35 | 100 | 90
Student16 | Languages | female | 100 | 50 | 30 | 70
Student17 | Languages | female | 80 | 100 | 55 | 65
Student18 | Mathematics | male | 30 | 49 | 55 | 75
Student19 | Languages | male | 68 | 90 | 88 | 70
Student20 | Mathematics | male | 40 | 45 | 40 | 80
Student21 | Languages | male | 50 | 45 | 100 | 100
Student22 | Mathematics | male | 100 | 99 | 100 | 90
Student23 | Languages | female | 85 | 80 | 80 | 80
student23 | Mathematics | male | 82 | 77 | 0 | 79
student24 | Languages | female | 100 | 91 | 13 | 82
student25 | Mathematics | male | 22 | 96 | 82 | 53
student26 | Languages | female | 37 | 29 | 56 | 59
student27 | Mathematics | male | 86 | 82 | 69 | 23
student28 | Languages | female | 44 | 25 | 43 | 1
student29 | Mathematics | male | 77 | 47 | 22 | 38
student30 | Languages | female | 19 | 35 | 23 | 10
student31 | Mathematics | male | 90 | 27 | 17 | 50
student32 | Languages | female | 60 | 75 | 33 | 38
student33 | Mathematics | male | 4 | 31 | 37 | 15
student34 | Languages | female | 77 | 97 | 81 | 44
student35 | Mathematics | male | 5 | 81 | 51 | 95
student36 | Languages | female | 70 | 61 | 70 | 94
student37 | Mathematics | male | 60 | 3 | 61 | 84
student38 | Languages | female | 63 | 39 | 0 | 11
student39 | Mathematics | male | 50 | 46 | 32 | 38
student40 | Languages | female | 51 | 75 | 25 | 3
student41 | Mathematics | male | 43 | 34 | 28 | 78
student42 | Languages | female | 11 | 89 | 60 | 95
student43 | Mathematics | male | 48 | 92 | 18 | 88
student44 | Languages | female | 82 | 2 | 59 | 73
student45 | Mathematics | male | 91 | 73 | 37 | 39
student46 | Languages | female | 4 | 8 | 12 | 10
student47 | Mathematics | male | 89 | 10 | 6 | 11
student48 | Languages | female | 90 | 32 | 21 | 18
student49 | Mathematics | male | 42 | 49 | 49 | 72
student50 | Languages | female | 56 | 37 | 67 | 54

### Attach sticky header to its parent

Student Grades
Account # | First Name | Last Name | Age | Total | Discount | Diff
--- | --- | --- | --- | --- | --- | ---
A43 | Peter | Parker | 28 | 9.99 | 20.3% | +3
A255 | John | Hood | 33 | 19.99 | 25.1% | -7
A33 | Clark | Kent | 18 | 15.49 | 44.2% | -13
A11 | Bruce | Almighty | 45 | 153.19 | 44% | +19
A102 | Bruce | Evans | 56 | 153.19 | 23% | +9
A23 | Mike | Peters | 22 | 5.69 | 20.3% | +2
A55 | Leslie | Kent | 33 | 15.99 | 25.1% | -3
A3 | Frank | Mint | 44 | 12.59 | 44.2% | -12
A21 | Joe | Thomas | 45 | 15.25 | 44% | +12
A12 | Tess | Evans | 66 | 13.59 | 23% | +4
A21 | Peter | Dunn | 12 | 2.99 | 21.1% | +2
A33 | Harry | Jones | 13 | 19.49 | 22.2% | -6
A13 | John | James | 16 | 13.89 | 42.1% | -13
A71 | Nick | Parker | 45 | 13.89 | 44% | +29
A21 | Charles | Dunn | 19 | 15.49 | 22% | +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