User:Timeshifter/Sandbox244#Test sticky-header (sortable)
{{Uses TemplateStyles|Template:Sticky header/styles.css}}
This sandbox is using {{t|sticky header}}. I added some more table widths. Divs have been removed.
See: User:Timeshifter/Sandbox243. And: Sandbox245 and Sandbox247 (narrow 3-column tables only). And: Template:Sticky header. And: Template:Sticky header/testcases.
- Substituted {{t|sticky header}} for {{t|sticky header/sandbox}}
- Substituted sticky-header for sticky-header-multi
Test sticky-header (no caption)
Wikitable:
{{Sticky header}}
| class="wikitable sticky-header" | ||||||||||||
| Header | Header 2 | Header 3 | Header 4
! Header 5 | Header 6 | Header 7 | Header 8
! Header 9 || Header 10 || Header 11 || Header 12 || Header 13 | ||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 3 | data | data | data | data | data | data | data | data | data | data | data | b |
| 1 | data | data | data | data | data | data | data | data | data | data | data | c |
| 2 | data | data | data | data | data | data | data | data | data | data | data | a |
Wikitable wikitext:
{{Sticky header}}
| class="wikitable sticky-header" | ||||||
| Header | Header 2 | Header 3 | Header 4
! Header 5 | Header 6 | Header 7 | Header 8
! Header 9 || Header 10 || Header 11 || Header 12 || Header 13 ⫶ |
|---|
Plain table:
{{sticky header}}
| class="sticky-header" | ||||||||
| Header | Header 2 | Header 3 | Header 4
! Header 5 | Header 6 | Header 7 | Header 8
! Header 9 | ||
|---|---|---|---|---|---|---|---|---|
| 3 | data | data | data | data | data | data | data | b |
| 1 | data | data | data | data | data | data | data | c |
| 2 | data | data | data | data | data | data | data | a |
Plain table wikitext:
{{sticky header}}
| class="sticky-header" | ||||||
| Header | Header 2 | Header 3 | Header 4
! Header 5 | Header 6 | Header 7 | Header 8
! Header 9 ⫶ |
|---|
Test sticky-header (no caption). Narrower tables
{{Sticky header}}
| class="wikitable sticky-header" | ||
| Header | Header 2 | Header 3 |
|---|---|---|
| 3 | data | b |
| 1 | data | c |
| 2 | data | a |
Plain table:
{{Sticky header}}
| class="sticky-header" | ||
| Header | Header 2 | Header 3 |
|---|---|---|
| 3 | data | b |
| 1 | data | c |
| 2 | data | a |
Test sticky-header (caption)
Sticky first row.
Wikitable:
{{sticky header}}
| class="wikitable sticky-header"
|+ Caption | ||||||||
| Header | Header 2 | Header 3 | Header 4
! Header 5 | Header 6 | Header 7 | Header 8
! Header 9 | ||
|---|---|---|---|---|---|---|---|---|
| 3 | data | data | data | data | data | data | data | b |
| 1 | data | data | data | data | data | data | data | c |
| 2 | data | data | data | data | data | data | data | a |
Wikitable wikitext:
{{sticky header}}
| class="wikitable sticky-header"
|+ Caption | ||||||
| Header | Header 2 | Header 3 | Header 4
! Header 5 | Header 6 | Header 7 | Header 8
! Header 9 ⫶ |
|---|
Plain table:
{{sticky header}}
| class="sticky-header"
|+ Caption | ||||||||
| Header | Header 2 | Header 3 | Header 4
! Header 5 | Header 6 | Header 7 | Header 8
! Header 9 | ||
|---|---|---|---|---|---|---|---|---|
| 3 | data | data | data | data | data | data | data | b |
| 1 | data | data | data | data | data | data | data | c |
| 2 | data | data | data | data | data | data | data | a |
Plain table wikitext:
{{sticky header}}
| class="sticky-header"
|+ Caption | ||||||
| Header | Header 2 | Header 3 | Header 4
! Header 5 | Header 6 | Header 7 | Header 8
! Header 9 ⫶ |
|---|
Test sticky-header (sortable)
Sticky first row.
Wikitable:
{{Sticky header}}
| class="wikitable sortable sticky-header"
|+ Caption | |||||||||||||||
| Header | Header 2 | Header 3 | Header 4
! Header 5 | Header 6 | Header 7 | Header 8
! Header 9 | Header 10 | Header 11 | Header 12
! Header 13 | Header 14 | Header 15
! class="unsortable" | Header 16 | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| class="sorttop"
| top | top | top | top | top | top
| top | top | top | top | top | top
| top | top | top | top | ||
| 3 | data | data | data | data | data | data | data | data | data | data | data | data | data | data | b |
| 1 | data | data | data | data | data | data | data | data | data | data | data | data | data | data | c |
| 2 | data | data | data | data | data | data | data | data | data | data | data | data | data | data | a |
| class="sortbottom"
| bottom | bottom | bottom | bottom | bottom | bottom
| bottom | bottom | bottom | bottom | bottom | bottom
| bottom | bottom | bottom | bottom |
Wikitable wikitext:
{{Sticky header}}
| class="wikitable sortable sticky-header"
|+ Caption | |||||||||||||
| Header | Header 2 | Header 3 | Header 4
! Header 5 | Header 6 | Header 7 | Header 8
! Header 9 | Header 10 | Header 11 | Header 12
! Header 13 | Header 14 | Header 15
! class="unsortable" | Header 16 | ||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| class="sorttop"
| top | top | top | top | top | top
| top | top | top | top | top | top
| top | top | top | top
... |
| class="sortbottom"
| bottom | bottom | bottom | bottom | bottom | bottom
| bottom | bottom | bottom | bottom | bottom | bottom
| bottom | bottom | bottom | bottom |
Plain table:
{{sticky header}}
| class="sortable sticky-header"
|+ Caption | ||||||||
| Header | Header 2 | Header 3 | Header 4
! Header 5 | Header 6 | Header 7 | Header 8
! class="unsortable" | Header 9 | ||
|---|---|---|---|---|---|---|---|---|
| class="sorttop"
| top | top | top | top | top
| top | top | top | top | |
| 3 | data | data | data | data | data | data | data | b |
| 1 | data | data | data | data | data | data | data | c |
| 2 | data | data | data | data | data | data | data | a |
| class="sortbottom"
| bottom | bottom | bottom | bottom | bottom
| bottom | bottom | bottom | bottom |
Plain table wikitext:
{{sticky header}}
| class="sortable sticky-header"
|+ Caption | |||||||
| Header | Header 2 | Header 3 | Header 4
! Header 5 | Header 6 | Header 7 | Header 8
! class="unsortable" | Header 9 | |
|---|---|---|---|---|---|---|---|
| class="sorttop"
| top | top | top | top | top
| top | top | top | top
⫶ |
| class="sortbottom"
| bottom | bottom | bottom | bottom | bottom
| bottom | bottom | bottom | bottom |
Test sticky-header (sortable). Narrower tables
{{Sticky header}}
| class="wikitable sortable sticky-header"
|+ Caption | ||
| Header | Header 2
! class="unsortable" | Header 3 | |
|---|---|---|
| class="sorttop"
| top | top | top |
| 3 | data | b |
| 1 | data | c |
| 2 | data | a |
| class="sortbottom"
| bottom | bottom | bottom |
Plain table:
{{Sticky header}}
| class="sortable sticky-header"
|+ Caption | ||
| Header | Header 2
! class="unsortable" | Header 3 | |
|---|---|---|
| class="sorttop"
| top | top | top |
| 3 | data | b |
| 1 | data | c |
| 2 | data | a |
| class="sortbottom"
| bottom | bottom | bottom |
Test sticky-header. 2 rows. (sortable)
Sticky {{Tag|thead|o}} element.
{{Tracked|T6740}}
{{Tracked|T355492}}
Issues:
- Nothing sticky if JavaScript disabled, which is used by sortable, currently the only way to move headers to the {{Tag|thead|o}} element.
- Sticky
sorttoprows, which sortable moves to the {{Tag|thead|o}} element after sorting.
Wikitable:
{{sticky header}}
| class="wikitable sortable sticky-header"
|+ Caption | ||||||||
| rowspan="2" | Header
! colspan="8" | Header group | ||||||||
|---|---|---|---|---|---|---|---|---|
| Header 2 | Header 3 | Header 4 | Header 5
! Header 6 | Header 7 | Header 8
! class="unsortable" | Header 9 | |||
| class="sorttop"
| top | top | top | top | top
| top | top | top | top | |
| 3 | data | data | data | data | data | data | data | b |
| 1 | data | data | data | data | data | data | data | c |
| 2 | data | data | data | data | data | data | data | a |
| class="sortbottom"
| bottom | bottom | bottom | bottom | bottom
| bottom | bottom | bottom | bottom |
Wikitable wikitext:
{{sticky header}}
| class="wikitable sortable sticky-header"
|+ Caption | |||||||
| rowspan="2" | Header
! colspan="8" | Header group | |||||||
|---|---|---|---|---|---|---|---|
| Header 2 | Header 3 | Header 4 | Header 5
! Header 6 | Header 7 | Header 8
! class="unsortable" | Header 9 | ||
| class="sorttop"
| top | top | top | top | top
| top | top | top | top
⫶ |
| class="sortbottom"
| bottom | bottom | bottom | bottom | bottom
| bottom | bottom | bottom | bottom |
Plain table:
{{sticky header}}
| class="sortable sticky-header"
|+ Caption | ||||||||
| rowspan="2" | Header
! colspan="8" | Header group | ||||||||
|---|---|---|---|---|---|---|---|---|
| Header 2 | Header 3 | Header 4 | Header 5
! Header 6 | Header 7 | Header 8
! class="unsortable" | Header 9 | |||
| class="sorttop"
| top | top | top | top | top
| top | top | top | top | |
| 3 | data | data | data | data | data | data | data | b |
| 1 | data | data | data | data | data | data | data | c |
| 2 | data | data | data | data | data | data | data | a |
| class="sortbottom"
| bottom | bottom | bottom | bottom | bottom
| bottom | bottom | bottom | bottom |
Plain table wikitext:
{{sticky header}}
| class="sortable sticky-header"
|+ Caption | |||||||
| rowspan="2" | Header
! colspan="8" | Header group | |||||||
|---|---|---|---|---|---|---|---|
| Header 2 | Header 3 | Header 4 | Header 5
! Header 6 | Header 7 | Header 8
! class="unsortable" | Header 9 | ||
| class="sorttop"
| top | top | top | top | top
| top | top | top | top
⫶ |
| class="sortbottom"
| bottom | bottom | bottom | bottom | bottom
| bottom | bottom | bottom | bottom |
Test template static row numbers (sticky-header, no caption)
Uses {{tl|static row numbers}} with adjusted wikitable borders.
No label:
{{sticky header}}
{{Static row numbers}}
| class="wikitable sticky-header static-row-numbers" |
| Header |
|---|
| rank 1 |
| rank 2 |
| class="static-row-numbers-norank"
| norank 1 |
| class="static-row-numbers-norank"
| norank 2 |
| rank 3 |
| rank 4 |
Label:
{{sticky header}}
{{Static row numbers}}
| class="wikitable sticky-header static-row-numbers static-row-header-text" |
| Header |
|---|
| rank 1 |
| rank 2 |
| class="static-row-numbers-norank"
| norank 1 |
| class="static-row-numbers-norank"
| norank 2 |
| rank 3 |
| rank 4 |
Test template static row numbers (sticky-header, caption)
Uses {{tl|static row numbers}} with adjusted wikitable borders.
No label:
{{sticky header}}
{{Static row numbers}}
| class="wikitable sticky-header static-row-numbers"
|+ Caption |
| Header |
|---|
| rank 1 |
| rank 2 |
| class="static-row-numbers-norank"
| norank 1 |
| class="static-row-numbers-norank"
| norank 2 |
| rank 3 |
| rank 4 |
Label:
{{sticky header}}
{{Static row numbers}}
| class="wikitable sticky-header static-row-numbers static-row-header-text"
|+ Caption |
| Header |
|---|
| rank 1 |
| rank 2 |
| class="static-row-numbers-norank"
| norank 1 |
| class="static-row-numbers-norank"
| norank 2 |
| rank 3 |
| rank 4 |
Test template static row numbers (sticky-header, sortable)
Uses {{tl|static row numbers}} with adjusted wikitable borders.
No label:
{{sticky header}}
{{Static row numbers}}
| class="wikitable sortable sticky-header static-row-numbers"
|+ Caption |
| Header |
|---|
| class="sorttop static-row-header"
| top |
| class="sorttop static-row-header"
| top |
| rank 1 |
| rank 2 |
| class="static-row-numbers-norank"
| norank 1 |
| class="static-row-numbers-norank"
| norank 2 |
| rank 3 |
| rank 4 |
| class="sortbottom static-row-header"
| bottom |
| class="sortbottom static-row-header"
| bottom |
Label:
{{sticky header}}
{{Static row numbers}}
| class="wikitable sortable sticky-header static-row-numbers static-row-header-text"
|+ Caption |
| Header |
|---|
| class="sorttop static-row-header"
| top |
| class="sorttop static-row-header"
| top |
| rank 1 |
| rank 2 |
| class="static-row-numbers-norank"
| norank 1 |
| class="static-row-numbers-norank"
| norank 2 |
| rank 3 |
| rank 4 |
| class="sortbottom static-row-header"
| bottom |
| class="sortbottom static-row-header"
| bottom |
Test template static row numbers. 2 rows. (sticky-header, sortable)
Uses {{tl|static row numbers}} with adjusted wikitable borders.
No label:
{{sticky header}}
{{Static row numbers}}
| class="wikitable sortable sticky-header static-row-numbers"
|+ Caption | |
| colspan="2" | Header group | |
|---|---|
| class="static-row-header"
! Header ! class="unsortable" | Header | |
| class="sorttop static-row-header"
| top | top |
| class="sorttop static-row-header"
| top | top |
| rank 1 | data |
| rank 2 | data |
| class="static-row-numbers-norank"
| norank 1 | data |
| class="static-row-numbers-norank"
| norank 2 | data |
| rank 3 | data |
| rank 4 | data |
| class="sortbottom static-row-header"
| bottom | bottom |
| class="sortbottom static-row-header"
| bottom | bottom |
Label:
{{sticky header}}
{{Static row numbers}}
| class="wikitable sortable sticky-header static-row-numbers static-row-header-text"
|+ Caption | |
| colspan="2" | Header group | |
|---|---|
| class="static-row-header"
! Header ! class="unsortable" | Header | |
| class="sorttop static-row-header"
| top | top |
| class="sorttop static-row-header"
| top | top |
| rank 1 | data |
| rank 2 | data |
| class="static-row-numbers-norank"
| norank 1 | data |
| class="static-row-numbers-norank"
| norank 2 | data |
| rank 3 | data |
| rank 4 | data |
| class="sortbottom static-row-header"
| bottom | bottom |
| class="sortbottom static-row-header"
| bottom | bottom |
Padding
Padding for testing purposes.