Modèle:Sticky header

 Documentation[voir] [modifier] [historique] [purger]

Utilisation

modifier

Ce modèle est destiné à forcer une fixation des en têtes de table de sorte que ces en-têtes restent lisibles en permanence à l'écran. Incluez ce modèle en ajoutant {{Sticky header}} ou {{sticky header}} au-dessus d'un tableau. Puis, ajoutez l'une des classes suivantes au texte wiki de début de table:

Classes pour le texte wiki de début de table : {| class="class1 class2".
Class Description
sticky-header Rendre la première rangée d'en-tête collante.
sticky-header-multi Rendre plusieurs lignes d'en-tête collantes en haut.
Nécessite une table triable avec {| class="… sortable …". Evitez de l'utiliser avec la classe sorttop qui devient collante après tri. Évitez de créer des lignes d'en-tête trop hautes qui pourraient bloquer trop de données sur les écrans courts (par exemple, affichage paysage sur mobile).

Paramètres

modifier

Description du modèle à compléter.

Paramètres du modèle[Modifier les données du modèle]

ParamètreDescriptionTypeÉtat
Aucun paramètre spécifié

Exemples

modifier

Ligne d'en-tête collante unique

modifier

La classe sticky-header est utilisée pour rendre collante la première ligne d’en-tête. Le tri n’est pas obligatoire.

{{Sticky header}}
{| class="wikitable sticky-header alternance collapsible"
|+ Sous-titre de tableau
! Mois !! Tri1 !! Tri2
|-
| janvier || 1 || 24
|-
| février || 2 || 23
|-
| mars || 3 || 22
|-
| avril || 4 || 21
|-
| mai || 5 || 20
|-
| juin || 6 || 19
|-
| juillet || 7 || 18
|-
| août || 8 || 17
|-
| septembre || 9 || 16
|-
| octobre || 10 || 15
|-
| novembre || 11 || 14
|-
| décembre || 12 || 13
|-
| janvier || 13 || 12
|-
| février || 14 || 11
|-
| mars || 15 || 10
|-
| avril || 16 || 9
|-
| mai || 17 || 8
|-
| juin || 18 || 7
|-
| juillet || 19 || 6
|-
| août || 20 || 5
|-
| septembre || 21 || 4
|-
| octobre || 22 || 3
|-
| novembre || 23 || 2
|-
| décembre || 24 || 1
|- class=sortbottom
| '''Total''' || 26 || 30
|}

Plusieurs lignes d'en-tête collantes

modifier
Enregistré sur Phabricator
Tâche 6740
Enregistré sur Phabricator
Tâche 355492

La classe sticky-header-multi est utilisée pour rendre plusieurs lignes d’en-tête collantes. Une table sortable est requise car la table triable est actuellement le seul moyen de déplacer des lignes consécutives d'en-têtes de colonnes vers l'élément <thead> . Si certaines ou toutes les colonnes ne doivent pas être triables, alors class=unsortable peut être placé dans la cellule d'en-tête avec l'icône de tri. Le dessus de la table sera toujours collant. Voir Aide Tableaux triables. Si JavaScript est désactivé, alors sortable et cette solution ne fonctionnerons pas.

Évitez d'utiliser la classe sorttop car sortable déplace ces lignes dans l'élément <thead> après le tri, ce qui les rend également très collantes. Une solution pourrait être de les déplacer vers le bas et d'utiliser la classe sortbottom à la place.

Démonstration en cas de double en-têtes
Mois Couleur Données
info1 info2 info3
janv-00 blanc a α
févr-00 noir b β
mars-00 rose c γ
avr-00 blanc d δ
mai-00 noir e ε
juin-00 rose a ζ
juil-00 blanc b η
août-00 noir c θ
sept-00 rose d ι
oct-00 blanc e κ
nov-00 noir a λ
déc-00 rose b μ
janv-01 blanc c ν
févr-01 noir d ξ
mars-01 rose e ο
avr-01 blanc a π
mai-01 noir b ρ
juin-01 rose c σ
juil-01 blanc d α
août-01 noir e β
sept-01 rose a γ
oct-01 blanc b δ
nov-01 noir c ε
déc-01 rose d ζ
nombre de valeur différente 3 5 24 24
{{Sticky header}}
{| class="wikitable collapsible sortable alternance sticky-header-multi"
|+ Démonstration en cas de double en-têtes
! rowspan=2|Mois 
! rowspan=2|Couleur
! colspan=3|Données
|-
! info1
! info2
! class="unsortable" | info3
|-
! janv-00
| blanc || a || α |||-
! févr-00
| noir || b || β |||-
! mars-00
| rose || c || γ |||-
! avr-00
| blanc || d || δ |||-
! mai-00
| noir || e || ε |||-
! juin-00
| rose || a || ζ |||-
! juil-00
| blanc || b || η |||-
! août-00
| noir || c || θ |||-
! sept-00
| rose || d || ι |||-
! oct-00
| blanc || e || κ |||-
! nov-00
| noir || a || λ |||-
! déc-00
| rose || b || μ |||-
! janv-01
| blanc || c || ν |||-
! févr-01
| noir || d || ξ |||-
! mars-01
| rose || e || ο |||-
! avr-01
| blanc || a || π |||-
! mai-01
| noir || b || ρ |||-
! juin-01
| rose || c || σ |||-
! juil-01
| blanc || d || α |||-
! août-01
| noir || e || β |||-
! sept-01
| rose || a || γ |||-
! oct-01
| blanc || b || δ |||-
! nov-01
| noir || c || ε |||-
! déc-01
| rose || d || ζ |||}

Voir aussi

modifier