Sablon:Sticky header

Használati útmutató

Sablon:Sticky header/styles.css

Ezzel a sablonnal a táblázat fejlécei a képernyő tetejéhez „tapadnak”, miközben a táblázat adatait le- és felfelé görgetik.

Használata hosszú táblázatokon javasolt, amelyek oszlopfejléceit nehéz lehet megjegyezni a táblázat görgetése közben.

Nem rendezhető táblázatoknál a legalul megadott sorokat kell beírni!

Általános használata

Szúrja be a {{sticky header}} sablont a táblázat fölé. Adja hozzá a sticky-header paramétert a táblázat osztályában (class) a wikitable sortable után.

{{Sticky header}}
{| class="wikitable sortable sticky-header"
⫶
|}

Példa egyszerű fejléc esetében:

{{Sticky header}}
{| class="wikitable sortable sticky-header"
|+ Cím
|-
! Név !! A !! B !! C
|-
! Piros
| 1 || 2 || 3
|-
! Sárga
| 4 || 5 || 6
⫶
|}

Példa többsoros fejléc esetében, {{static row numbers}}^(?) és {{sorting row}}:

Sorszámokkal

{{Static row numbers}}
{{Sticky header}}
{| class="wikitable sortable static-row-numbers sticky-header"
|+ Cím
|-
! rowspan=2 | Név
! colspan=3 | Adatok
|-
! A !! B !! C
|- {{Sorting row|4}}
! Piros
| 1 || 2 || 3
|-
! Sárga
| 4 || 5 || 6
⫶
|}

Sorszámok nélkül

Cím
Név	Adatok
Név	A	B	C
Piros	1	2	3
Sárga	4	5	6
Arany	7	8	9
Kék	10	11	12
Zöld	13	14	15
Cián	16	17	18

{{Import style|sticky}}
{| class="wikitable sortable is-sticky-head"
|+ Cím
|-
! rowspan=2 | Név
! colspan=3 | Adatok
|-
! A !! B !! C
|- {{Sorting row|4}}
! Piros
| 1 || 2 || 3
|-
! Sárga
| 4 || 5 || 6
⫶
|}

Táblázat alárendelt fejlécekkel

Probléma: A felső alszakasz fejléce rögzített lesz, mivel csak egy másik fejléc.

{{Sticky header}}
{| class="wikitable sortable sticky-header"
|+ Cím
|-
! Név !! A !! B !! C
|-
! colspan=4 |Szakasz 1
|-
! Piros
| 1 || 2 || 3
|-
! Sárga
| 4 || 5 || 6
|-
! colspan=4 |Szakasz 2
|-
...

A megoldás az, hogy a felső alszakasz elé egy keskeny üres sort teszünk, és akkor már nem lesz rögzített:

{{Sticky header}}
{| class="wikitable sortable sticky-header"
|+ Cím
|-
! Név !! A !! B !! C
|-
| || || || 
|-
! colspan=4 |Szakasz 1
|-
! Piros
| 1 || 2 || 3
|-
! Sárga
| 4 || 5 || 6
|-
! colspan=4 |Szakasz 2
|-
...

Egysoros fejléc class=sorttop paraméterrel

A rendezés után a sorttop paramétert használó sorok az oszlopfejlécekkel együtt rögzítetté válnak. Lásd a problémát:

Összesített COVID-19 elhalálozások. (2021 január 1)
Dátum	Első eset	Jan 1
Az egész világon		1,472,363
Napok a megkétszereződésig		112
Országok és területek		196
	2020-3-3	335,789
	2020-3-19	193,875
	2020-3-13	148,994

{{sticky header}}
{| class="wikitable sortable mw-datatable sticky-header col1left col2left" style=text-align:right;
|+Összesített COVID-19 elhalálozások. (2021 január 1)
|- 
!Dátum!!Első eset!!Jan&nbsp;1
|- class="sorttop static-row-header"
|Az egész világon || ||1,472,363
|- class="sorttop static-row-header"
|Napok a megkétszereződésig || ||112
|- class="sorttop static-row-header"
|Országok és területek || ||196
|-
|{{zászló|USA}} || {2020-3-3 ||335,789
|-
|{{zászló|Brazília}} || 2020-3-19 ||193,875
|-
|{{zászló|India}} || 2020-3-13 ||148,994
|}

Ha ez nem kívánatos, a megoldás az, hogy eltávolítjuk a sticky-header paramétert a táblázatból, és hozzáadjuk a sticky osztályt. Megjegyzendő, hogy az elhelyezése eltérő. Lásd a javítást:

Összesített COVID-19 elhalálozások. (2021 január 1)
Dátum	Első eset	Jan 1
Az egész világon		1,472,363
Napok a megkétszereződésig		112
Országok és területek		196
	2020-3-3	335,789
	2020-3-19	193,875
	2020-3-13	148,994

{{sticky header}}
{| class="wikitable sortable mw-datatable col1left col2left" style=text-align:right;
|+Cumulative COVID-19 deaths. Jan 1, 2021
|- class=sticky
!Date!!First case!!Jan&nbsp;1
|- class="sorttop static-row-header"
|Az egész világon || ||1,472,363
|- class="sorttop static-row-header"
|DNapok a megkétszereződésig || ||112
|- class="sorttop static-row-header"
|Országok és területek || ||196
|-
|{{zászló|USA}} || 2020-3-3 ||335,789
|-
|{{zászló|Brazília}} || 2020-3-19 ||193,875
|-
|{{zászló|India}} || 2020-3-13 ||148,994
|}

Többsoros fejléc, amit összesítő sorok követnek

Ehhez a 'class=sticky-header' szükséges. Az oszlopok rendezésekor a State, Federal és az U.S. total összesített sorai a táblázat aljára kerülnek. Ezt a 'class=sortbottom'-t használata okozza. Frissítse az oldalt, hogy visszahelyezze őket a tetejére. Az összegeket tartalmazó sorok hasznosabbak, ha felül vannak. De ez a 3 sor nem használhatja a class=sorttop-ot egy többsoros fejléccel rendelkező táblázatban, különben ezek is rögzítettek lennének. Ez túl nagy függőleges helyet foglalna el és kevés hely maradna a képernyőn, különösen a mobiltelefonokban.

Egy másik lehetőség a 'class=sortbottom' eltávolítása. Így a 3 sor rendeződik, és az oldal frissítése nélkül is vissza kerülnek a tetejére.

2015-ös bebörtönzések száma. Minden korosztály 100 000-re jutó aránya.
Joghatóság	Szám			Arány
	Összesen	Férfi	Nő	Férfi	Nő
Állami	1,949,400	1,759,700	189,800	1,450	150
Szövetségi	195,700	182,800	12,900	150	10
USA összesen	2,145,100	1,942,500	202,600	1,600	160
Alabama	42,900	38,600	4,300	1,640	170
Alaszka	5,400	4,800	600	1,230	170
Arizona	54,900	49,100	5,800	1,440	170

{{mw-datatable}}{{static row numbers}}{{sticky header}}
{| class="wikitable sortable mw-datatable sticky-header static-row-numbers" style=text-align:right;
|+ 2015-ös bebörtönzések száma. Minden korosztály 100 000-re jutó aránya.
|- 
! Joghatóság!! colspan=3 |Szám!! colspan=2 |Arány
|-
! !!Összesen!!Férfi!!Nő!!Férfi!!Nő
|- {{sort row|6}} 
|- class="static-row-header sortbottom" style="font-weight:bold; text-align:right;"
| style=text-align:left | Állami || 1,949,400 || 1,759,700 || 189,800 || 1,450 || 150
|- class="static-row-header sortbottom"  style="font-weight:bold; text-align:right;"
| style=text-align:left | Szövetségi || 195,700 || 182,800 || 12,900 || 150 || 10
|- class="static-row-header sortbottom"  style="font-weight:bold; text-align:right;"
| style=text-align:left | USA összesen || 2,145,100 || 1,942,500 || 202,600 || 1,600 || 160
|-
|{{zászló|Alabama}} Alabama|| 42,900 || 38,600 || 4,300 || 1,640 || 170
|-
|{{zászló|Alaszka}} Alaszka || 5,400 || 4,800 || 600 || 1,230 || 170
|-
|{{zászló|Arizona}} Arizona || 54,900 || 49,100 || 5,800 || 1,440 || 170
|}

Ismert problémák

A következő operációs rendszereken tesztelve: Windows 10, Windows 11, iOS 17 (iPhone SE 2020) és Android 13 (Samsung Galaxy S21).

Androidos telefonokon a táblázat fejlécei nem rögzítettek ha legalább egy, ezt a sablont használó táblázat szélesebb mint a képernyő, ami álló módban valószínűbb. A kicsinyítés megoldja a problémát. Ez a hiba az oldalak mobilos és asztali verziójában egyaránt előfordul.
Az iPhone készülékeken a táblázat fejlécei nem rögzítettek, ha legalább egy, ezt a sablont használó táblázat szélesebb, mint a képernyő, ami álló módban a legvalószínűbb. A hiba az oldalak asztali verziójában fordul elő, míg a mobil verzió működik.
Telefonokon, különösen fekvő módban, a többsoros oszlopfejléceket illetve természetes vagy kényszerített sortöréseket tartalmazó táblázatok esetében a képernyő nagy részét elfoglalhatják, ha a fejléc rögzített, megnehezítve az adatok olvasását. A rögzítő funkciót nem lehet letiltani, ezért az egyetlen megoldás az, hogy a tájolást álló módra állítja, vagy nem használja ezt a sablont.

A magas oszlopfejlécek túl sok adatot blokkolnak:

oszzlop 1–4
oszlop 1–2		oszlop 3–4
o1	o2	o3	o4
adat	adat	adat	adat
adat	adat	adat	adat
adat	adat	adat	adat
adat	adat	adat	adat
adat	adat	adat	adat
adat	adat	adat	adat
adat	adat	adat	adat
adat	adat	adat	adat
adat	adat	adat	adat
adat	adat	adat	adat

Nem rendezhető táblázat esetében

Az alábbi sorokat kell hozzádani a táblázat elején.

{{Import style|sticky}}
{|class="wikitable"
|- class="is-sticky sortable"
|+ Cím
⫶
|}

Példa nem rendezhető táblázat esetében:

Cím
Név	A	B	C
Piros	1	2	3
Sárga	4	5	6
Arany	7	8	9
Kék	10	11	12
Zöld	13	14	15
Cián	16	17	18

{{Import style|sticky}}
{|class="wikitable" border: 2px solid;
|- class="is-sticky sortable"
|+ Cím
! Név !! A !! B !! C
|-
! Piros
| 1 || 2 || 3
|-
! Sárga
| 4 || 5 || 6
⫶
|}

Lásd még

en:Help:Table/Advanced#Tables with sticky headers

A lap frissítéséhez kattints ide!