L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Figer la ligne et la colonne dans un tableau HTML à l'aide de CSS
Une interface utilisateur interactive et facile à utiliser incite toujours l'utilisateur à travailler davantage. Chaque fois qu'une structure grille / table est utilisée pour afficher les données, un scénario courant montre une barre de défilement lorsque les données dépassent une plage visuelle. Lorsque l'utilisateur fait défiler le tableau à l'aide de la barre de défilement, l'en-tête de ligne ou la colonne défile également, ce qui est ennuyeux pour l'utilisateur d'identifier la ligne / colonne.
Pour surmonter cela, nous pouvons simplement figer les lignes et les colonnes d'en-tête (s) basé sur l'exigence, et le reste des données de la grille peut être un scroll, ce qui est très utile à l'utilisateur.
Pour figer la ligne / colonne, nous pouvons utiliser un simple tableau HTML et CSS.
HTML: En HTML, nous pouvons définir la ligne d'en-tête par la balise
Sample HTML:
CSS: Des changements majeurs seront apportés au CSS puisque le gel de la ligne / colonne sera géré par CSS. Pour figer la ligne et la colonne, nous devons considérer la balise / sélecteur CSS suivante:
- top: Cette propriété est utilisée pour définir la position supérieure de l'élément, pour la ou les lignes d'en-tête (figer la ligne) ceci sera toujours 0.
- left: Cette propriété est utilisée pour définir la position gauche de l'élément, pour la première colonne figée, ce sera 0. Pour plus d'une colonne figée, la valeur de la propriété gauche de la colonne (autre que la première colonne) sera être la somme de la largeur totale de la colonne précédente.
- position: Cette propriété rend l'élément collant lors du défilement, donc ses valeurs seront toujours "collantes" pour toutes les lignes et colonnes figées.
- z-index: Cette propriété définit la priorité de visibilité de la (des) colonne (s) et ligne (s) de gel sur la colonne à défilement. La colonne figée aura une valeur d'index z plus élevée qu'une colonne à défilement.
- background-color: La couleur d'arrière-plan garde la colonne déroulante derrière la colonne gelée pendant le défilement. Si la couleur d'arrière-plan n'est pas fournie, la valeur de la cellule (données) ressemblera à un chevauchement avec d'autres valeurs de cellule.
Exemple de CSS:
] Sortie finale:
En-tête fixe (rangée du haut):
Fixe colonnes (2 premières colonnes):
" Position: Sticky – Le positionnement collant est un hybride de positionnement relatif et fixe. L'élément est traité comme positionné relative jusqu'à ce qu'il franchisse un seuil spécifié, point auquel il est traité comme positionné fixe. «
Pour clarifier davantage le positionnement collant, prenons un exemple d'en-tête collant du tableau dans une page.
En-tête collant:
Parfois, nous avons l'obligation d'afficher le tableau à l'intérieur d'une longue page qui a une barre de défilement verticale. Mais lorsque nous faisons défiler la page, la table est également défilée avec un en-tête qui n'est pas utile pour les utilisateurs d'identifier l'en-tête de colonne. Pour surmonter ce problème, nous pouvons coller l'en-tête du tableau jusqu'à ce que le tableau soit en train de défiler (coller l'en-tête jusqu'à ce que la dernière ligne du tableau soit visible par l'utilisateur).
Exemple:
HTML:
CSS:
Prise en charge du navigateur
Liste de prise en charge du navigateur de balises 'Position: sticky' (source: www.caniuse.com)
En-tête collant dans Internet Explorer
La balise collante ne fonctionnera pas dans le navigateur Internet Explorer car IE ne prend pas en charge la position: balise CSS collante, le reste du navigateur principal comme Chrome, Firefox, Edge, etc. sont bien supportés.
Pour rendre l'en-tête collant dans le navigateur IE, il existe des solutions de contournement qui utilisent JavaScript avec CSS pour y arriver. Voir les liens ci-dessous:
https://css-tricks.com/stickybits-alternative-position-sticky-polyfills/
Source link