Jump to content

Template:Sticky table start/doc

From BattleIntelligence
< Template:Sticky table start
Revision as of 15:23, 8 November 2024 by imported>Deadfire (→See also)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Shortcuts

Lua error: Module:TNT:172: '''Missing JsonConfig extension, or not properly configured; Cannot load https://commons.wikimedia.org/wiki/Data:I18n/Uses TemplateStyles.tab. See https://www.mediawiki.org/wiki/Extension:JsonConfig#Supporting_Wikimedia_templates'''.

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. It keeps very wide tables within the main content area's width so the layout of Wikipedia's desktop version remains intact.

A toggle button displays on smaller screens to disable or enable these features for cases where large sticky elements are a hindrance to reading the underlying scrollable data, which is more likely on small devices such as mobile phones.

Using this template without any classes puts a table in a scrollable box without sticky headers. If there is a need for a horizontal-only scroll window (for example with a wide table where sticky headers would be too large, and some rows are very tall) see: Help:Table#Overflowing tables.

Usage

Include {{sticky table start}} above and {{sticky table end}} below the table. Add any of the following as needed.

Table classes

Classes for table start wikitext: {| class="class1 class2".
Class Summary
sticky-table-head Make the table head top sticky. Don't combine with sticky-table-rowN. Requires sortable table, which moves consecutive top header rows into the <thead> (table head) HTML element. Rows using the sorttop class become 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 1 to avoid stacking issues where a taller row 1 is still visible. Don't combine with sticky-table-head. Unpredictable results if the row spans or is spanned with the rowspan attribute.
sticky-table-colN Make column N left sticky where N is a number from 1 to 2. Limit 1 to avoid stacking issues where a wider column 1 is still visible. Unpredictable results if the column spans or is spanned with the colspan attribute. Avoid making an excessively wide column sticky that might block too much data on narrow screens (ex. mobile portrait).

Cell classes

Classes for cell wikitext: ! class="class1 class2" | …
or | class="class1 class2" | ….
Class Summary
sticky-table-none Remove sticky from cell in cases where rowspan causes an issue. For example, a sticky column using rowspan will have some cells that are sticky in the next column. See usage example.
sticky-table-left Add left sticky to cell in cases where rowspan causes an issue. For example, column 1 using rowspan with a sticky column 2 will have some cells in column 2 that are not sticky and some in column 3 that are sticky. See usage example.

Sticky row 1 and column 1

Note: Also works if the table uses the sortable class. 

{{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 Header 21 Header 22 Header 23 Header 24 Header 25 Header 26
data data data data data data data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data data data data data data data
data data 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 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.

The "Header 2" cell uses the sticky-table-none 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"
|+ Caption
|-
! rowspan="2" | Header 1
! colspan="4" | Header group 1
⫶
|-
! class="sticky-table-none" | Header 2
! Header 3 !! Header 4 !! Header 5 !! …
⫶
|}
{{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

Usage of sticky-table-none. Sticky column 1

Note that the table in this section is basically the same as the table in the next section except that a different column is left sticky. This means that a different header uses the sticky-table-none class.

The header rows are top sticky and the first column is left sticky. When rowspan messes up what is sticky, the sticky-table-none class can be used to fix it.

For illustration purposes, a background color has been added to the table:

  • yellow for sticky-table-none
{{Sticky table start}}
{| class="wikitable sortable sticky-table-head sticky-table-col1"
|-
! rowspan="2 | Header 1
! rowspan="2" | Header 2
! colspan="3" | Header group 1 !! …
|-
! class="sticky-table-none" | Header 3
! Header 4
! Header 5 !! …
|-
| data
| rowspan="2" | data
| data || …
|-
| data
| class="sticky-table-none" | data
| data || …
|-
| rowspan="2" | data
| data || …
|-
| class="sticky-table-none" | data
| data
| data || …
⫶
|}
{{Sticky table end}}
Header 1 Header 2 Header group 1 Header group 2 Header group 3 Header group 4
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

Usage of sticky-table-none and sticky-table-left. Sticky column 2

The header rows are top sticky and the second column is left sticky. When making a column left sticky and rowspan messes up what is sticky, the sticky-table-none and sticky-table-left classes can be used to fix it.

For illustration purposes, background colors have been added to the table:

  • yellow for sticky-table-none
  • orange for sticky-table-left
{{Sticky table start}}
{| class="wikitable sortable sticky-table-head sticky-table-col2"
|-
! rowspan="2 | Header 1
! rowspan="2" | Header 2
! colspan="3" | Header group 1 !! …
|-
! Header 3
! class="sticky-table-none" | Header 4
! Header 5 !! …
|-
| data
| rowspan="2" | data
| data || …
|-
| data
| class="sticky-table-none" | data
| data || …
|-
| rowspan="2" | data
| data || …
|-
| class="sticky-table-left" | data
| class="sticky-table-none" | data
| data || …
⫶
|}
{{Sticky table end}}
Header 1 Header 2 Header group 1 Header group 2 Header group 3 Header group 4
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

See also

More template styles for tables:


Retrieved from "https://battleint.net/index.php?title=Template:Sticky_table_start/doc&oldid=170631"