USER:TIMESHIFTER SANDBOX243

This template uses TemplateStyles:

Template:Sticky header/sandbox/styles.css

This sandbox is using {{ sticky header/testcases}}. I added some more table widths. I also made some of the wide tables wider so that they would extend past the screen in landscape orientation even on larger cell phones. I removed the divs.

See: User:Timeshifter/Sandbox244. And: Sandbox245 and Sandbox247 (narrow 3-column tables only). And: Template:Sticky header.

Template:Sticky header/testcases

This is the template test cases page for the sandbox of User:Timeshifter. Purge this page to update the examples.
If there are many examples of a complicated template, later ones may break due to limits in MediaWiki; see the HTML comment " NewPP limit report" in the rendered page.
You can also use Special:ExpandTemplates to examine the results of template uses.
You can test how this page looks in the different skins and parsers with these links:

Test sticky-header (no caption)

Sticky first row.

Wikitable:

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/sandbox}}
{| 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:

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/sandbox}}
{| 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

Plain table:

Test sticky-header (caption)

Sticky first row.

Wikitable:

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/sandbox}}
{| class="wikitable sticky-header"
|+ Caption
|-
! Header !! Header 2 !! Header 3 !! Header 4
! Header 5 !! Header 6 !! Header 7 !! Header 8
! Header 9
⫶
|}

Plain table:

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/sandbox}}
{| 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:

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	Header 16
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
bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom

Wikitable wikitext:

{{Sticky header/sandbox}}
{| 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:

Caption
Header	Header 2	Header 3	Header 4	Header 5	Header 6	Header 7	Header 8	Header 9
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
bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom

Plain table wikitext:

{{Sticky header/sandbox}}
{| 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

Plain table:

Test sticky-header-multi. 2 rows. (sortable)

Sticky <thead> element.

Tracked in Phabricator
Task T6740

Tracked in Phabricator
Task T355492

Issues:

Nothing sticky if JavaScript disabled, which is used by sortable, currently the only way to move headers to the <thead> element.
Sticky sorttop rows, which sortable moves to the <thead> element after sorting.

Wikitable:

Caption
Header	Header group
Header	Header 2	Header 3	Header 4	Header 5	Header 6	Header 7	Header 8	Header 9
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
bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom

Wikitable wikitext:

{{Sticky header/sandbox}}
{| class="wikitable sortable sticky-header-multi"
|+ 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:

Caption
Header	Header group
Header	Header 2	Header 3	Header 4	Header 5	Header 6	Header 7	Header 8	Header 9
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
bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom

Plain table wikitext:

{{Sticky header/sandbox}}
{| class="sortable sticky-header-multi"
|+ 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
|}