--- title: "Comment figer les en-têtes de table" slug: "how-to-freeze-table-headers" updated: 2026-06-22T08:31:03Z published: 2026-06-22T08:31:03Z canonical: "docs.document360.com/how-to-freeze-table-headers" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.document360.com/llms.txt > Use this file to discover all available pages before exploring further. # 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. NOTE Document360 propose une [fonctionnalité intégrée de gel de table](/help/docs/fr/tables-in-advanced-wysiwyg-editor#freeze-rows-columns) dans l’éditeur WYSIWYG avancé qui vous permet de geler une ligne ou une colonne d’en-tête sans aucun code personnalisé. Utilisez les étapes ci-dessous uniquement si vous avez besoin d’une solution de contournement basée sur le CSS. --- ## 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 : ```
Your table code
``` --- ## 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; } ``` 1. **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 : ```
Your table code
``` 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. ![Animated demonstration showing a long table where the header row stays fixed at the top while the reader scrolls through the table content.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Table header freezing.gif) --- ## Portée et couverture | Objet | Détails | | --- | --- | | Portée | Par table — seules les tables enveloppées par `<div class="fixed-header-table">` sont affectées | | Hauteur de défilement par défaut | 400px — ajuste `max-height` dans le CSS pour changer lorsque le défilement s’active | | Alternative intégrée | L’éditeur WYSIWYG avancé dispose d’une [fonction native de gel de table](/help/docs/fr/tables-in-advanced-wysiwyg-editor#freeze-rows-columns) qui ne nécessite aucun code personnalisé | --- ## 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.