Template:Sticky table start/doc

This template adds a scrollable container around a table and its classes can be used to make the table's rows stick to the top or the columns stick to the left side of the container as the table's data is scrolled in and out of view. It's used on tall and/or wide tables that have headers that might be difficult to remember as you scroll through the data.

Toggle buttons exist to disable (expand) or enable (collapse) these features if the sticky elements are a hindrance to reading the underlying data, which is more likely on small devices such as mobile phones.

Usage

Include {{sticky table start}} above the table and {{sticky table end}} below the table. Add any needed classes from the following list to the table start wikitext.

Classes for table start wikitext: {| class="class1 class2".

Class	Summary
sticky-table-head	Make the table head top sticky. Requires sortable table, which moves consecutive top header rows into the <thead> (table head) HTML element. Don't combine with sticky-table-rowN. Avoid use with the sorttop class that becomes sticky after sorting. Avoid making headers sticky that aren't for the entire table (ex. section header rows). Avoid making excessively tall header rows sticky that might block too much data on short screens (ex. mobile landscape).
sticky-table-rowN	Make row N top sticky, where N is a number from 1 to 2. Limit one row to avoid stacking. Don't combine with sticky-table-head. Unpredictable results if the row spans or is spanned with the rowspan HTML attribute.
sticky-table-colN	Make column N left sticky, where N is a number from 1 to 2. Limit one column to avoid stacking. Unpredictable results if the column spans or is spanned with the colspan HTML attribute. Avoid making an excessively wide column sticky that might block too much data on narrow screens (ex. mobile portrait).

Classes for cell wikitext: ! class="''class1 class2''" | …
or | class="''class1 class2''" | ….

Class	Summary
sticky-table-unsticky	Remove sticky from cell in cases where span causes an issue.

Parameters for start template: {{sticky table start|parameter1|parameter2}}
.

Parameter	Summary
style	Optionally style the scrollable div that surrounds the table with a parameter of style=style1; style2;. For example, if you want a shorter div and, by extension, table: {{sticky table start|style=max-height: 50vh;}}. It is not recommended to increase the max-height above this template's 75vh setting as that would increase the difficulty of scrolling past a large table on mobile browsers.

Sticky table row 1 and column 1

{{Sticky table start}}
{| class="wikitable sticky-table-row1 sticky-table-col1"
⫶
|}
{{Sticky table end}}

Caption

Header 1	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	Header 17	Header 18	Header 19	Header 20
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data

Sticky table head and column 1

Note: The sticky-table-head class requires the table to use the sortable class so the column header rows are moved to the <thead> element.

Note: The "Header 2" cell uses the sticky-table-unsticky class to fix the left sticky issue caused by the "Header 1" cell's rowspan.

{{Sticky table start}}
{| class="wikitable sortable sticky-table-head sticky-table-col1"
⫶
|}
{{Sticky table end}}

Caption

Header 1	Header group 1				Header group 2					Header group 3					Header group 4
	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	Header 17	Header 18	Header 19	Header 20
top	top	top	top	top	top	top	top	top	top	top	top	top	top	top	top	top	top	top	top
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data
bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom	bottom