Loading

  • 21 Aug, 2019

  • By, Wikipedia

Template:Sticky Table Start
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.

Usage

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

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).
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.
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: 70vh;}}. 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. Making it too small like 50vh will only show a little bit of data in mobile landscape orientation, which makes it more difficult to read.

Sticky table 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
data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data data data data data
data data data data data data data data data data data data data data data data 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-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 and sticky-table-left

The second column is left sticky and the header rows top 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

Sticky table head and column 1. class=sticky-table-none

Note. To see where class=sticky-table-none is used see this search.

This complex table is adapted from this version of list of U.S. state and territory abbreviations. References are removed.

Note the rowspan for the "Name" column head (the 1st column). 2 header rows don't show up until the 3rd column. class=sticky-table-none| has to be added to the header cell with the sorting icon in that 3rd column. 

{{sticky table start}}{{mw-datatable}}
{|class="wikitable sortable sticky-table-head sticky-table-col1 mw-datatable"
|+ Codes and abbreviations for U.S. states, federal district, territories, and other regions
! rowspan=2 | [[List of states and territories of the United States|Name]]
! rowspan=2 | Status of region
! [[ISO 3166|ISO]]
! colspan=2 | [[#ANSI standard INCITS 38:2009|ANSI]]
![[#Postal codes|USPS]]
![[#Coast Guard vessel prefixes|USCG]]
! rowspan=2 | [[#GPO|GPO]]
! rowspan=2 | [[#Current use of traditional abbreviations|AP]]
! rowspan=2 | Other<br>abbreviations
|-
! class=sticky-table-none| !! !! !! !! &nbsp;
...
|}
{{sticky table end}}
Codes and abbreviations for U.S. states, federal district, territories, and other regions
Name Status of region ISO ANSI USPS USCG GPO AP Other
abbreviations
 
United States United States of America Federal state US
USA
840		 US 00 U.S. U.S. U.S.A.
Alabama Alabama State US-AL AL 01 AL AL Ala. Ala.
Alaska Alaska State US-AK AK 02 AK AK Alaska Alaska Ak.
Arizona Arizona State US-AZ AZ 04 AZ AZ Ariz. Ariz.
Arkansas Arkansas State US-AR AR 05 AR AR Ark. Ark.
California California State US-CA CA 06 CA CF Calif. Calif. Cal.
Colorado Colorado State US-CO CO 08 CO CL Colo. Colo.
Connecticut Connecticut State US-CT CT 09 CT CT Conn. Conn.
Delaware Delaware State US-DE DE 10 DE DL Del. Del.
Washington, D.C. District of Columbia Federal district US-DC DC 11 DC DC D.C. D.C. Dis. Col.
Florida Florida State US-FL FL 12 FL FL Fla. Fla.
Georgia (U.S. state) Georgia State US-GA GA 13 GA GA Ga. Ga. Geo.
Hawaii Hawaii State US-HI HI 15 HI HA Hawaii Hawaii Hi.; Haw.
Idaho Idaho State US-ID ID 16 ID ID Idaho Idaho Ida.
Illinois Illinois State US-IL IL 17 IL IL Ill. Ill.
Indiana Indiana State US-IN IN 18 IN IN Ind. Ind.
Iowa Iowa State US-IA IA 19 IA IA Iowa Iowa Ioa.
Kansas Kansas State US-KS KS 20 KS KA Kans. Kan. Ka.
Kentucky Kentucky State (officially Commonwealth) US-KY KY 21 KY KY Ky. Ky. Ken., Kent.
Louisiana Louisiana State US-LA LA 22 LA LA La. La.
Maine Maine State US-ME ME 23 ME ME Maine Maine
Maryland Maryland State US-MD MD 24 MD MD Md. Md. Mar., Mary.
Massachusetts Massachusetts State (officially Commonwealth) US-MA MA 25 MA MS Mass. Mass.
Michigan Michigan State US-MI MI 26 MI MC Mich. Mich.
Minnesota Minnesota State US-MN MN 27 MN MN Minn. Minn.
Mississippi Mississippi State US-MS MS 28 MS MI Miss. Miss.
Missouri Missouri State US-MO MO 29 MO MO Mo. Mo.
Montana Montana State US-MT MT 30 MT MT Mont. Mont.
Nebraska Nebraska State US-NE NE 31 NE NB Nebr. Neb.
Nevada Nevada State US-NV NV 32 NV NV Nev. Nev.
New Hampshire New Hampshire State US-NH NH 33 NH NH N.H. N.H.
New Jersey New Jersey State US-NJ NJ 34 NJ NJ N.J. N.J. N. Jersey
New Mexico New Mexico State US-NM NM 35 NM NM N. Mex. N.M. New M., New Mex.
New York (state) New York State US-NY NY 36 NY NY N.Y. N.Y. N. York
North Carolina North Carolina State US-NC NC 37 NC NC N.C. N.C. N. Car.
North Dakota North Dakota State US-ND ND 38 ND ND N. Dak. N.D.
Ohio Ohio State US-OH OH 39 OH OH Ohio Ohio O., Oh.
Oklahoma Oklahoma State US-OK OK 40 OK OK Okla. Okla.
Oregon Oregon State US-OR OR 41 OR OR Oreg. Ore.
Pennsylvania Pennsylvania State (officially Commonwealth) US-PA PA 42 PA PA Pa. Pa. Penn., Penna.
Rhode Island Rhode Island State US-RI RI 44 RI RI R.I. R.I. R.I. & P.P.
South Carolina South Carolina State US-SC SC 45 SC SC S.C. S.C. S. Car.
South Dakota South Dakota State US-SD SD 46 SD SD S. Dak. S.D. SoDak
Tennessee Tennessee State US-TN TN 47 TN TN Tenn. Tenn.
Texas Texas State US-TX TX 48 TX TX Tex. Texas
Utah Utah State US-UT UT 49 UT UT Utah Utah Ut.
Vermont Vermont State US-VT VT 50 VT VT Vt. Vt. Verm.
Virginia Virginia State (officially Commonwealth) US-VA VA 51 VA VA Va. Va. Virg.
Washington (state) Washington State US-WA WA 53 WA WN Wash. Wash. Wn.
West Virginia West Virginia State US-WV WV 54 WV WV W. Va. W.Va. W.V., W. Virg.
Wisconsin Wisconsin State US-WI WI 55 WI WS Wis. Wis. Wisc.
Wyoming Wyoming State US-WY WY 56 WY WY Wyo. Wyo.
American Samoa American Samoa Insular area (Territory) AS
ASM
016
US-AS		 AS 60 AS AS A.S.
Guam Guam Insular area (Territory) GU
GUM
316
US-GU		 GU 66 GU GU Guam
Northern Mariana Islands Northern Mariana Islands Insular area (Commonwealth) MP
MNP
580
US-MP		 MP 69 MP CM M.P. CNMI
Puerto Rico Puerto Rico Insular area (Commonwealth) PR
PRI
630
US-PR		 PR 72 PR PR P.R.
United States Virgin Islands U.S. Virgin Islands Insular area (Territory) VI
VIR
850
US-VI		 VI 78 VI VI V.I. U.S.V.I.
U.S. Minor Outlying Islands Insular areas UM
UMI
581
US-UM		 UM 74 UM
Baker Island Island UM-81 81 XB
Howland Island Island UM-84 84 XH
Jarvis Island Island UM-86 86 XQ
Johnston Atoll Atoll UM-67 67 XU
Kingman Reef Atoll UM-89 89 XM
Midway Atoll Atoll UM-71 71 QM
Navassa Island Island UM-76 76 XV
Palmyra Atoll Atoll UM-95 95 XL
Wake Island Atoll UM-79 79 QW
Marshall Islands Marshall Islands Freely associated state MH
MHL
584		 MH 68 MH
Federated States of Micronesia Micronesia Freely associated state FM
FSM
583		 FM 64 FM
Palau Palau Freely associated state PW
PLW
585		 PW 70 PW
U.S. Armed Forces – Americas US military mail code AA
U.S. Armed Forces – Europe US military mail code AE
U.S. Armed Forces – Pacific US military mail code AP
Nebraska Nebraska Obsolete postal code NB
Northern Mariana Islands Northern Mariana Islands Obsolete postal code CM
Panama Canal Zone Panama Canal Zone Obsolete postal code PZ
PCZ
594		 CZ
Philippines Philippine Islands Obsolete postal code PH
PHL
608		 PI
Trust Territory of the Pacific Islands Trust Territory of the Pacific Islands Obsolete postal code PC
PCI
582		 TT

Sticky table row 2 and column 2. class=sticky-table-left and none

Note. To see where class=sticky-table-left is used see this search.

Note the rowspans in column 1 below. class=sticky-table-left has to be added to the column 2 cells of each set of spanned rows. Specifically to the 2nd spanned row (and following) of each set of spanned rows. Not to the first spanned row of a set. See the wikitext. class=sticky-table-none has to be added to the cell in column 3 just to the right of each cell containing class=sticky-table-left.

This complex table is adapted from this version of WTA 1000 Series singles records and statistics#Title leaders. Screen reader users need the "Active tournaments" and "Defunct tournaments" column heads. Those users see the expanded table. The header colors are necessary if only one row is made sticky. In this case only table header row 2 is sticky, and that is what sighted users see when scrolling. One sticky row is better than 2 sticky rows, because this allows more data rows to be visible in mobile phones. The 2 column header colors are distinctive in both the light and dark toggle settings for Wikipedia articles. 

|-
|style="text-align:left" class="sticky-table-left"| {{sort|Azarenka.|{{flagg|uxx|BLR}} '''[[Victoria Azarenka]]'''}}
|class="sticky-table-none"| -

Table at source has glossary for the the 2-letter abbreviations.

Title leaders
Active tournaments Defunct tournaments
Titles Player DU QA IW MI MA IT CA CI WU CN FL CH GE SD PH KC PP ZU Years
23 Serena Williams - - 2 8 2 4 3 2 - 1 - 1 - - - - - - 1999–2016
17 Martina Hingis - - 1 2 - 2 2 - - - - 2 1 - - 1 5 1 1997–2007
15 Steffi Graf - - 1 3 - - 2 - - - 1 1 5 - 1 - 1 - 1990–1996
14 Maria Sharapova - 1 2 - 1 3 - 1 - 1 - - - 2 - - 2 1 2005–2015
11 Lindsay Davenport - - 2 - - - - - - - - - - 1 - - 4 4 1997–2005
10 Justine Henin - - 1 - - - 2 - - - - 2 3 - - - - 2 2002–2007
Victoria Azarenka - 2 2 3 - - - 2 - 1 - - - - - - - - 2009–2020
Iga Świątek - 2 2 1 1 3 - - - 1 - - - - - - - - 2021–2024
9 Conchita Martínez - - - - - 4 - - - - - 2 2 - 1 - - - 1993–2000
Monica Seles - - - 2 - 2 4 - - - - - 1 - - - - - 1990–2000
Venus Williams 2 - - 3 - 1 - - 1 - - 1 - - - - - 1 1998–2015
Simona Halep 1 1 1 - 2 1 3 - - - - - - - - - - - 2014–2022
Petra Kvitová - 1 - 1 3 - 1 - 2 - - - - - - - 1 - 2011–2023
7 Kim Clijsters - - 2 2 - 1 1 1 - - - - - - - - - - 2003–2010
6 Arantxa Sánchez Vicario - - - 2 - 1 2 - - - - 1 - - - - - - 1992–1996
Amélie Mauresmo - - - - - 2 2 - - - - - 2 - - - - - 2001–2005
Jelena Janković - - 1 - - 2 - 1 - - - 1 - - - 1 - - 2007–2010
Caroline Wozniacki 1 - 1 - - - 1 - - 2 - - - - - - 1 - 2010–2018
Aryna Sabalenka - 1 - - 2 - - 1 2 - - - - - - - - - 2018–2024
5 Gabriela Sabatini - - - - - 2 - - - - 1 2 - - - - - - 1991–1992
Mary Pierce - - - - - 1 - - - - - 1 - 1 - 2 - - 1997–2005
Dinara Safina - - - - 1 1 1 - - - - - 1 - - - 1 - 2008–2009
Agnieszka Radwańska - - - 1 - - 1 - - 2 - - - - - - 1 - 2011–2016

See also

More template styles for tables:

The above documentation is transcluded from Template:Sticky table start/doc. (edit | history)
Editors can experiment in this template's sandbox (edit | diff) and testcases (edit) pages.
Add categories to the /doc subpage. Subpages of this template.
Retrieved from "https://en.wikipedia.org/w/index.php?title=Template:Sticky_table_start&oldid=1244373369"