Comment figer les en-têtes de table

Geler l’en-tête du tableau permet de garder les titres des colonnes visibles pendant qu’un lecteur fait défiler de longs tableaux, ce qui facilite l’interprétation des données sans revenir en haut.

Quand utiliser les en-têtes de table congelés

• Tableaux de référence longs — lorsqu’un tableau comporte de nombreuses lignes, les lecteurs perdent le fil de la colonne qu’ils lisent en défilant vers le bas. Un en-tête gelé élimine ce problème.
• Tableaux comparatifs — geler l’en-tête garantit que les étiquettes des colonnes restent visibles lorsque les lecteurs parcourent des lignes d’options comparables.
• Articles riches en données — tout tableau assez haut pour nécessiter un défilement bénéficie d’un en-tête fixe.

Comment cela fonctionne

Cette approche utilise deux composantes :

• CSS personnalisé — rend le conteneur de tableau défilable et épingle la ligne d’en-tête en haut de la zone visible.
• Envelopper HTML par article — le CSS ne s’active que pour les tables enroulées dans <div class="fixed-header-table">, donc il n’affecte pas toutes les tables du site. Vous appliquez l’emballage individuellement sur chaque table qui nécessite un en-tête congelé.

Petite référence

Extrait CSS — coller une fois dans les paramètres CSS personnalisés :

.fixed-header-table div[data-type="table-content"] {
    position: relative;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #ddd;
}
table {
    width: 100%;
    border-collapse: collapse;
}
tbody th {
    position: sticky;
    top: 0;
    z-index: 2;
}

Wrapper HTML par article — enroulez votre code de table dans cette div en vue code :

<div class="fixed-header-table">
Your table code
</div>

Comment figer un en-tête de tableau

Ajoutez le CSS

1. Dans le portail de la Base de connaissances, rendez-vous sur Paramètres > site de la Base de connaissances > CSS & JavaScript personnalisés.
2. Sélectionnez l’onglet CSS et collez l’extrait suivant :

.fixed-header-table div[data-type="table-content"] {
    position: relative;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #ddd;
}
table {
    width: 100%;
    border-collapse: collapse;
}
tbody th {
    position: sticky;
    top: 0;
    z-index: 2;
}

3. Cliquez sur Enregistrer.

Emballez le tableau dans l’article

1. Ouvrez l’article contenant le tableau que vous souhaitez geler.
2. Passez à la vue code.
3. Localisez le HTML de la table et encapsulez-le dans la div suivante :

<div class="fixed-header-table">
Your table code
</div>

La ligne d’en-tête reste désormais fixe en haut du tableau pendant que le lecteur fait défiler le contenu.

Conséquences

Lorsqu’un lecteur fait défiler un long tableau, les en-têtes de colonne restent visibles en haut du tableau.

Portée et couverture

Meilleures pratiques

• Ajustez max-height pour correspondre à votre contenu — le modèle par défaut 400px fonctionne dans la plupart des cas, mais pour des tableaux très denses ou des exigences spécifiques de mise en page, augmentez cette valeur afin que les lecteurs n’aient pas à faire défiler un tableau trop tôt.
• Utilisez la fonction de gel intégrée lorsque possible — si vous travaillez dans l’éditeur WYSIWYG avancé, la fonction de gel natif est plus simple à appliquer et ne nécessite pas d’accès à la vue du code.
• Appliquez le wrapper uniquement aux tables qui en ont besoin — comme la classe doit être ajoutée manuellement par table, vous avez un contrôle total sur quelles tables se figent ou non. Réservez-le aux tables assez hautes pour réellement bénéficier d’un en-tête fixe.
• Testez après l’application — passez à l’aperçu du site de la Knowledge Base après avoir enroulé une table pour confirmer que l’en-tête est correctement coincé et que le conteneur de défilement s’affiche à la hauteur attendue.