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

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

Option | Default | Description
--- | --- | ---
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.
cssStickyHeaders_attachTo | 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.
cssStickyHeaders_filteredToTop | 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:

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