සැකිල්ල:Sticky header

සැකිලි ප්‍රලේඛනය[නරඹන්න] [සංස්කරණය] [ඉතිහාසය] [විරේචනය]

මෙම සැකිල්ල පිටු බොහෝ ගණනක භාවිතා වන නිසා සිදුකරන වෙනස් කිරීම් බොහෝ ස්ථානවලට බලපානු ඇත. ඔබ සිදුකිරීමට අදහස් කරන වෙනස්කම් මෙම සැකිල්ලට අදාළ /sandbox හෝ /testcases උපපිටුවල, හෝ ඔබගේ පරිශීලක උපපිටුවේ පළමුව සිදුකොට පරීක්ෂාකර බලන්න. එම වෙනස්කම් සිදුකිරීමට ප්‍රථම අදාළ සාකච්ඡා පිටුවේ ඒ පිළිබඳව සංවාදයක් ගොඩනැගීමට කාරුණික වන්න.

Transclusion count updated automatically (ප්‍රලේඛනය වෙතට යොමුවන්න).

Redirect

{{sticky-header}}

This template uses TemplateStyles:

Template:Sticky header/styles.css

This template makes a table's column headers stick to the top of the screen as the table's data is scrolled in and out of view. It's used on tall tables that have column headers that might be difficult to remember as you scroll through the data.

Usage

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

Classes for table start wikitext: `{| class="class1 class2"`.
Class	Summary
`sticky-header`	Make the first header row top sticky.
`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

Single sticky header row

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.

{{sticky header}}
{| class="wikitable sortable sticky-header"
|+ Caption
|-
! Color !! A !! B
! class="unsortable" | C
|- class=sorttop
| '''Max''' || 10 || 11 || 12
|-
| Red || 1 || 2 || 3
|-
| Lime || 4 || 5 || 6
|-
| Gold || 7 || 8 || 9
|-
| Blue || 10 || 11 || 12
|- class=sortbottom
| '''Total''' || 22 || 26 || 30
|}

Multiple sticky header rows

Tracked in Bugzilla
Bug T6740

Tracked in Bugzilla
Bug 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 <thead> 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.

Sorttop versus sortbottom

Avoid using the sorttop class since sortable moves those rows into the <thead> 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.

{{sticky header}}
{| class="wikitable sortable sticky-header-multi"
|+ Caption
|-
! rowspan=2 | Color
! colspan=3 | Data
|-
! A !! B
! class="unsortable" | C
|-
| Red || 1 || 2 || 3
|-
| Lime || 4 || 5 || 6
|-
| Gold || 7 || 8 || 9
|-
| Blue || 10 || 11 || 12
|- class=sortbottom
| '''Max''' || 10 || 11 || 12
|- class=sortbottom
| '''Total''' || 22 || 26 || 30
|}

Row starts off at top and moves to bottom after sorting

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.

Country/Territory/Region/Group	WB		WTO		UNCTAD
Country/Territory/Region/Group	Tariff rate, applied, weighted mean, all products	Year	Simple average applied MFN tariff, all products	Year	Import tariff rates on non-agricultural and non-fuel products	Year
WORLD	2.59%	2017
Aruba	0%	2021			10.80%	2021
ඇෆ්ගනිස්තානය	0%	2018	6.5%	2018	0%	2018
Angola	0%	2021	10.9%	2021	0%	2021
Anguilla					13.14%	2021
Low & middle income economies (WB)	4.28%	2017
Low-income economies (WB)	9.79%	2017
Middle-income economies (WB)	N/A
Upper middle income economies (WB)	3.70%	2017
High-income economies (WB)	2.02%	2017
European Union	1.39%	2021	5.2%	2021	1.49%	2021

Header rows not for whole table

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 .

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.

{{sticky header}}
{| class="wikitable sortable sticky-header-multi"
|+ Caption
|-
! rowspan=2 | Color
! colspan=3 | Data
|-
! A !! B !! C
|-
| colspan=4 |
|-
! colspan=4 | Section 1
|-
| Red || 1 || 2 || 3
|-
| Lime || 4 || 5 || 6
|-
! colspan=4 | Section 2
|-
| Gold || 7 || 8 || 9
|-
| Blue || 10 || 11 || 12
|}

Excessively tall 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 (<br>) in the headers, or split the table up into smaller tables to reduce headers.

Header group 1
Header group 2		Header group 3
Header 1	Header 2	Header 3	Header 4
data	data	data	data
data	data	data	data
data	data	data	data
data	data	data	data
data	data	data	data
data	data	data	data
data	data	data	data
data	data	data	data

Multi-row header that can't be visibly sortable

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.

aptX variants
		SBC	aptX	aptX LL	aptX HD	aptX Adaptive			Audio CD
		(for reference)				@ 279 kbit/s	@ 420 kbit/s	@ up to ~1.2 mbit/s	(for reference)
misc.	Launch	?	< 2009	2012	2016	2018		2021	1980s
	Trademark	–	Qualcomm (until August 2015: CSR, until July 2010: APT Licensing Ltd., until March 2005: Solid State Logic)						–
	Related patents	EP 0400755B1 (expired)	EP 0398973B1 (revoked)	aptX, US 9398620B1 (expired)	aptX	?			–
	Free implementations	FFmpeg, libsbc	FFmpeg, libopenaptx	FFmpeg, libopenaptx	FFmpeg, libopenaptx	N/A			–
	Proprietary implementations	Multiple	Qualcomm libaptX	None	Qualcomm libaptXHD	?			–
	Chip	–	CSR8635	CSR8670	CSR8675	QCC5100			–
Audio Encoding	Word depth	?	16-bit	16-bit	16-bit 24-bit	24-bit		16-bit	16-bit
	Sampling rate	44.1 kHz 48 kHz	44.1 kHz 48 kHz	44.1 kHz 48 kHz	44.1 kHz 48 kHz	44.1 kHz 48 kHz 96 kHz		44.1 kHz	44.1 kHz
	Bit rate	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)	1411 kbit/s (@ 44.1 kHz)
	Bit rate	Constant	Constant	Constant	Constant	Variable		Variable	Constant
	Codec latency	?	1.8 – 2.0 ms	?	1.8 – 2.0 ms	1.4 – 2.0 ms		?	–
	Hardware transmitter latency	?	?	≈ 40 ms (using dedicated antenna)	?	≈ 80 ms		?	–
	Software transmitter latency (most phones)	200 – 500 ms depending on the transmitting device							–
	Backwards compatible with	–	SBC^{[තහවුරු කර නොමැත]}	SBC, aptX	SBC, aptX	SBC, aptX, aptX HD		?	?
Sound quality	THD+N @ 1 kHz		−67 dB or −85 dB?	−85 dB	-80 dB or −90 dB?	−90 dB	−100 dB	−96 dB	−96 dB
	Multi-tone @ 1 kHz		−100 dB	?	−100 dB	−90 dB	−100 dB	?
	Multi-tone @ 10 kHz		−65 dB	?	−90 dB	−85 dB	−95 dB	?
	Crosstalk		−120 dB	?	−155 dB	−90 dB	−200 dB	?
	SNR @ 1 kHz		93 dB	93 dB	129 dB	130 dB	135 dB	−96 dB	−96 dB
	PEAQ ODG		−0.18 or −0.08?	?	0.05 or 0.04?	−0.06	0.045	?
	Frequency response over Bluetooth		20 Hz – 22.7 kHz	20 Hz – 22.7 kHz	20 Hz – 22.7 kHz	20 Hz – 22.7 kHz		20 Hz – 22 kHz	20 Hz – 22 kHz

Known issues

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

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.
On Android phones, table headers aren't top-sticky if at least one table using this template is wider than the screen, which is more likely in portrait orientation. The table's horizontal scroll doesn't work with this template, so wide tables span outside of the main content area making the entire page wider and requiring you to instead horizontally scroll the entire page. Zooming out to see the entire table makes the headers sticky, but also makes the text smaller and less readable the wider the table is. Currently, the only semi-solution is to view the zoomed out sticky headers in landscape orientation instead of portrait orientation so that the text is more readable.
<div style="overflow:auto"></div> - Do not use this around tables. It prevents sticky headers until removed. See diff. See "List by region" table.
Jumping to an {{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.
Due to changes to the Minerva skin (default mobile skin), sticky no longer works on it. The changes are from phab:T387768, which adds an overflow: hidden; style to a parent container.