Template:Sticky header/doc

Include this template by adding {{tlc|sticky header}} or its redirect {{tlc|sticky-header}} above a table. Add one of the following classes to the table start wikitext.

class=wikitable style="background-color: white;" |+ Classes for table start wikitext: {| class="class1 class2".
Class ! Summary
class=nowrap | sticky-header | Make the first header row top sticky.
class=nowrap | sticky-header-multi | Requires sortable table. Make multiple header rows top sticky. 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). class=unsortable can be added to all columns if necessary. See below: #Multi-row header that can't be visibly sortable

The sticky-header class is used to make the first header row top sticky. Sortable is not required. sorttop and sortbottom are not a problem with single header rows.

{{Tracked|T6740}}

{{Tracked|T355492}}

The sticky-header-multi class is used to make multiple header rows top sticky. Sortable table is required since sortable is currently the only way to move consecutive rows of column headers to the {{Tag|thead|o}} element. If some or all columns should not be sortable, then class=unsortable can be put in the header cell with the sorting icon. Table top will still be sticky. See Help:Sortable tables. If JavaScript is disabled, then sortable and this solution won't work.

Avoid using the sorttop class since sortable moves those rows into the {{Tag|thead|o}} element after sorting, which makes them top sticky too. A solution might be to move them to the bottom and use the sortbottom class instead.

This table excerpt is adapted from List of countries by tariff rate. sortbottom is used instead of sorttop for the "World" row. So the World row does not become sticky after sorting. After sorting it moves to the bottom with the regional rows.

{{sticky header}}{{mw-datatable}}{{Static row numbers}}{{sort under}}{{table alignment}}

class="mw-datatable wikitable sortable sticky-header-multi static-row-numbers sort-under col1left" style="text-align:right;"
rowspan=2 data-sort-type=text | Country/Territory/Region/Group || colspan=2 | WB || colspan=2 | WTO || colspan=2 | UNCTAD
data-sort-type=number | Tariff rate, applied, weighted mean, all products || data-sort-type=number | Year || data-sort-type=number | Simple average applied MFN tariff, all products || data-sort-type=number | Year || data-sort-type=number | Import tariff rates on non-agricultural and non-fuel products || data-sort-type=number | Year
class="sortbottom static-row-header" style="font-weight:bold;" | style="background-color:#f8f9fa; text-align:left;" | {{flagicon|UN}} WORLD	{{val|2.59|u=%|fmt=gaps}}	2017
{{ABW}}	{{val|0|u=%|fmt=gaps}}	2021			{{val|10.80|u=%|fmt=gaps}}	2021
{{AFG}}	{{val|0|u=%|fmt=gaps}}	2018	{{val|6.5|u=%|fmt=gaps}}	2018	{{val|0|u=%|fmt=gaps}}	2018
{{AGO}}	{{val|0|u=%|fmt=gaps}}	2021	{{val|10.9|u=%|fmt=gaps}}	2021	{{val|0|u=%|fmt=gaps}}	2021
{{AIA}}					{{val|13.14|u=%|fmt=gaps}}	2021
class="sortbottom static-row-header" style="background-color:#ececec;" | style="font-style:italic;" | Low & middle income economies (WB)	{{val|4.28|u=%|fmt=gaps}}	2017
class="sortbottom static-row-header" style="background-color:#ececec;" | style="font-style:italic;" | Low-income economies (WB)	{{val|9.79|u=%|fmt=gaps}}	2017
class="sortbottom static-row-header" style="background-color:#ececec;" | style="font-style:italic;" | Middle-income economies (WB)	{{N/A}}
class="sortbottom static-row-header" style="background-color:#ececec;" | style="font-style:italic; padding-left:25px;" | Upper middle income economies (WB)	{{val|3.70|u=%|fmt=gaps}}	2017
class="sortbottom static-row-header" style="background-color:#ececec;" | style="font-style:italic;" | High-income economies (WB)	{{val|2.02|u=%|fmt=gaps}}	2017
class="sortbottom static-row-header" style="background-color:#ececec;" | style="font-style:italic;" | European Union	{{val|1.39|u=%|fmt=gaps}}	2021	{{val|5.2|u=%|fmt=gaps}}	2021	{{val|1.49|u=%|fmt=gaps}}	2021

Consecutive rows of column headers are top sticky, so avoid adding a row of headers right under the column headers that don't apply to the entire table such as a section header meant to visually separate the table.

A solution might be to move each section to a column or separate tables, which also avoids accessibility issues per MOS:COLHEAD.

Another solution might be to add a blank row of data cells (| colspan=4 |) between the last column header row and the first section header row so the latter is not included in the consecutive header rows.

Avoid excessively tall header rows that might block too much or all data when sticky on a small mobile screen, especially in landscape orientation. Some solutions might be to move some of the header text to the table caption, more concise header text, remove line-breaks ({{Tag|br|o}}) in the headers, or split the table up into smaller tables to reduce headers.

This table is adapted from here: AptX#Variants. It uses class=sortable in order to have a sticky multi-row header, but all columns individually use class=unsortable.

None of the columns can be sortable because the type of info and data within any single column varies greatly, and there is no point in ordering it alphabetically or numerically. Plus sorting any column removes the rowspans in the first column which gives the overall order of the table.

{{sticky header}}{{mw-datatable}}

class="wikitable sortable sticky-header-multi mw-datatable" style="text-align:center" |+aptX variants ! class=unsortable rowspan="2" style="border-bottom:2px solid gray; background-color:#D8D9DD" | ! class=unsortable rowspan="2" style="border-bottom:2px solid gray; background-color:#D8D9DD" | ! style="border-bottom:hidden; background-color:#D8D9DD" | SBC ! style="border-bottom:hidden; background-color:#D6F9D6" | aptX ! style="border-bottom:hidden; background-color:#D6F9D6" | aptX LL ! style="border-bottom:hidden; background-color:#D6F9D6" | aptX HD ! colspan="3" style="border-bottom:hidden; background-color:#D6F9D6" | aptX Adaptive ! style="border-bottom:hidden; background-color:#D8D9DD" | Audio CD
class=unsortable style="background-color:#D8D9DD; border-bottom:2px solid gray" | (for reference) ! class=unsortable style="background-color:#D6F9D6; border-bottom:2px solid gray" | ! class=unsortable style="background-color:#D6F9D6; border-bottom:2px solid gray" | ! class=unsortable style="background-color:#D6F9D6; border-bottom:2px solid gray" | ! class=unsortable style="background-color:#D6F9D6; border-bottom:2px solid gray; font-weight:lighter" | @ 279 kbit/s ! class=unsortable style="background-color:#D6F9D6; border-bottom:2px solid gray; font-weight:lighter" | @ 420 kbit/s ! class=unsortable style="background-color:#D6F9D6; border-bottom:2px solid gray; font-weight:lighter" | @ up to {{nowrap|~1.2 mbit/s}} ! class=unsortable style="background-color:#D8D9DD; border-bottom:2px solid gray" | (for reference)
rowspan="6" | misc. ! style="text-align:left" | Launch | style="background-color:#F0F2F6" | ? | < 2009 || 2012 || 2016 || colspan="2" | 2018 |2021 | style="background-color:#F0F2F6" | 1980s
style="text-align:left" | Trademark | style="background-color:#F0F2F6" | – | colspan="6" | Qualcomm (until August 2015: CSR, until July 2010: APT Licensing Ltd., until March 2005: Solid State Logic) || style="background-color:#F0F2F6" | –
style="text-align:left" | Related patents | style="background-color:#F0F2F6" | {{patent|EP|0400755B1}} (expired) || {{patent|EP|0398973B1}} (revoked) || aptX, {{patent|US|9398620B1}} (expired) || aptX || colspan="3" | ? || style="background-color:#F0F2F6" | –
style="text-align:left" | Free implementations | style="background-color:#F0F2F6" | FFmpeg, libsbc || FFmpeg, libopenaptx|| FFmpeg, libopenaptx || FFmpeg, libopenaptx || colspan="3" | N/A || style="background-color:#F0F2F6" | –
style="text-align:left" | Proprietary implementations | style="background-color:#F0F2F6" | Multiple || Qualcomm libaptX || None || Qualcomm libaptXHD || colspan="3" | ? || style="background-color:#F0F2F6" | –
style="text-align:left" | Chip | style="background-color:#F0F2F6" | – | CSR8635 || CSR8670 || CSR8675 || colspan="3" | QCC5100 || style="background-color:#F0F2F6" | –
rowspan="8" | Audio Encoding ! style="text-align:left" | Word depth | style="background-color:#F0F2F6" | ? | 16-bit || 16-bit || 16-bit 24-bit || colspan="2" | 24-bit |16-bit|| style="background-color:#F0F2F6" | 16-bit
style="text-align:left" | Sampling rate | style="background-color:#F0F2F6" | 44.1 kHz 48 kHz   || 44.1 kHz 48 kHz   || 44.1 kHz 48 kHz   || 44.1 kHz 48 kHz   || colspan="2" | 44.1 kHz 48 kHz 96 kHz |44.1 kHz|| style="background-color:#F0F2F6" | 44.1 kHz
style="text-align:left" rowspan="2" | Bit rate | style="background-color:#F0F2F6" | 345 kbit/s (@ 48 kHz) || 352 kbit/s (@ 44.1 kHz) 384 kbit/s (@ 48 kHz) || 352 kbit/s (@ 48 kHz) || 576 kbit/s (24 bits @ 48 kHz) || 279 kbit/s || 420 kbit/s |~140 kbit/s to 1.2 mbit/s (content dependent) || style="background-color:#F0F2F6" | 1411 kbit/s (@ 44.1 kHz)
style="background-color:#F0F2F6" | Constant	Constant	Constant	Constant	colspan="2" | Variable |Variable	style="background-color:#F0F2F6" | Constant
style="text-align:left" | Codec latency | style="background-color:#F0F2F6" | ? | 1.8 – 2.0 ms || ? || 1.8 – 2.0 ms || colspan="2" | 1.4 – 2.0 ms | ?|| style="background-color:#F0F2F6" | –
style="text-align:left" | Hardware transmitter latency | style="background-color:#F0F2F6" | ? || ? || ≈ 40 ms (using dedicated antenna) || ? || colspan="2" | ≈ 80 ms | ?|| style="background-color:#F0F2F6" | –
style="text-align:left" | Software transmitter latency (most phones) | colspan="7" | 200 – 500 ms depending on the transmitting device || style="background-color:#F0F2F6" | –
style="text-align:left" | Backwards compatible with | style="background-color:#F0F2F6" | – | SBC{{Citation needed|reason=Looks like a totally separated codec|date=February 2024}} || SBC, aptX || SBC, aptX || colspan="2" | SBC, aptX, aptX HD | ?|| style="background-color:#F0F2F6" | ?
rowspan="7" | Sound quality ! style="text-align:left" | THD+N @ 1 kHz | style="background-color:#F0F2F6" | | −67 dB or −85 dB? || −85 dB || -80 dB or −90 dB? || −90 dB || −100 dB |−96 dB|| style="background-color:#F0F2F6" | −96 dB
style="text-align:left" | Multi-tone @ 1 kHz | style="background-color:#F0F2F6" | | −100 dB || ? || −100 dB || −90 dB || −100 dB | ?|| style="background-color:#F0F2F6" |
style="text-align:left" | Multi-tone @ 10 kHz | style="background-color:#F0F2F6" | | −65 dB || ? || −90 dB || −85 dB || −95 dB | ?|| style="background-color:#F0F2F6" |
style="text-align:left" | Crosstalk | style="background-color:#F0F2F6" | | −120 dB || ? || −155 dB || −90 dB || −200 dB | ?|| style="background-color:#F0F2F6" |
style="text-align:left" | SNR @ 1 kHz | style="background-color:#F0F2F6" | | 93 dB || 93 dB || 129 dB || 130 dB || 135 dB |−96 dB|| style="background-color:#F0F2F6" | −96 dB
style="text-align:left" | PEAQ ODG | style="background-color:#F0F2F6" | | −0.18 or −0.08? || ? || 0.05 or 0.04? || −0.06 || 0.045 | ?|| style="background-color:#F0F2F6" |
style="text-align:left" | Frequency response over Bluetooth | style="background-color:#F0F2F6" | | 20 Hz – 22.7 kHz || 20 Hz – 22.7 kHz || 20 Hz – 22.7 kHz || colspan="2" | 20 Hz – 22.7 kHz |20 Hz – 22 kHz|| style="background-color:#F0F2F6" | 20 Hz – 22 kHz

See [https://en.wikipedia.org/wiki/Template:Sticky_header/doc/Narrow_tables page of narrow sticky tables] for testing in cell phones, etc.

Tested in browsers on Windows 10, Windows 11, iOS 18 (iphone SE 2020), iOS 17 (iPhone 14 Pro Max), and Android 14 (Samsung Galaxy S21).

• Due to changes to the Minerva skin (default mobile skin), {{tl|sticky header}} no longer works at all in that skin. Tested in iOS and Android. The changes are from phab:T387768, which adds an overflow: hidden; style to a parent container. See also: phab:T388986. {{tl|sticky table start}} works fine in mobile.
• Does not work on the MonoBook skin when the browser width is 550 pixels or less due to the body.skin--responsive .monobook-body {overflow: auto;} style that can't be overridden.
• - Do not use this around tables. It prevents sticky headers until removed. See [https://en.wikipedia.org/w/index.php?title=The_Economist_Democracy_Index&diff=1222822979&oldid=1222822630 diff]. See "List by region" table.
• Jumping to an {{tl|Anchor}} (or similar mechanism for creating an anchor) in a table causes that location of the table to be at the top of the screen, where the sticky header covers it. True for all skins except Vector 2022 and MinervaNeue skin (mobile). See discussions here and here.

• {{slink|Help:Table/Advanced#Tables with sticky headers}}
• {{t|sticky table start}} - allows sticky rows and columns inside a scrollable area.
• {{t|shy}} – Can be used to help narrow columns by adding a soft hyphen to a word to allow it to wrap.

More template styles for tables:

• {{t|sort under}} - moves the sorting arrows under the headers.
• {{t|row hover highlight}} - adds row hover highlighting, and option for white background.
• {{t|static row numbers}} - adds a column of row numbers to a table.
• {{t|table alignment}} - aligns the cells in a column, or a whole table.

{{Sandbox other||

Category:Table templates

Category:Templates using TemplateStyles to style external elements

}}