interface Web
js tutoriel
Création d'un tableau déroulant avec un en-tête collant et une colonne gelée à l'aide de HTML et CSS
Création d'un tableau déroulant avec un en-tête collant et une colonne gelée à l'aide de HTML et CSS
Les tableaux sont fondamentaux dans les applications Web pour afficher des données structurées. L'ajout de fonctionnalités telles qu'un en-tête déroulant et des colonnes gelées (collantes) peuvent rendre les tableaux encore plus conviviaux. Dans cet article, nous allons explorer comment créer un tableau avec un en-tête collant et une colonne de gauche figée en utilisant du HTML et du CSS purs.
Exemple de stylo code
Pour voir le code en action, consultez cet exemple en direct sur CodePen :
Cet exemple de code utilise la classe JS pour créer un tableau. Vous pouvez reproduire cela avec n'importe quel framework ou bibliothèque de votre choix.
Principales caractéristiques du tableau
- En-tête collant : l'en-tête du tableau reste visible en haut lors du défilement vertical.
- Colonne de gauche gelée : la première colonne reste fixe lorsque vous faites défiler horizontalement.
- Contenu défilant : le défilement vertical et horizontal est pris en charge.
- Styles personnalisables : le design de la table est épuré et moderne, avec des rayures zébrées et des effets de survol.
Structure HTML
Nous utilisons une structure de table simple avec un pour l'en-tête et un
pour les lignes. Le tableau est enveloppé dans un div pour le défilement. Voici le code :<div>
<h2>
CSS for Sticky Header and Frozen Column
</h2>
<p>Here’s the CSS that makes the magic happen:<br>
</p>
<pre class="brush:php;toolbar:false">/* General styles */
body {
font-family: Arial, sans-serif;
}
/* Scrollable container */
.table-container {
border: 1px solid #e5e7eb;
border-bottom: none;
overflow: auto; /* Enables both horizontal and vertical scrolling */
height: 400px; /* Limits table height for vertical scrolling */
}
/* Table layout */
.table {
border-collapse: collapse;
width: 100%;
table-layout: fixed; /* Ensures consistent column widths */
}
/* Table cells and headers */
.table th,
.table td {
padding: 8px;
text-align: center;
border: 1px solid #e5e7eb;
}
/* Frozen first column */
.table td:nth-child(1),
.table th:nth-child(1) {
background: red; /* Highlighted background for frozen column */
position: sticky;
left: 0; /* Ensures the column stays on the left */
z-index: 5; /* Keeps the column above other cells */
color: white;
}
/* Add higher z-index for header */
.table th:nth-child(1) {
z-index: 6;
}
/* Sticky header */
.table th {
background-color: #1e3a8a;
color: white;
font-size: 14px;
font-weight: bold;
position: sticky;
top: 0; /* Makes the header stick to the top */
z-index: 2; /* Keeps the header above the table body */
}
/* Styling for table body */
.table td {
font-size: 14px;
color: #6b7280;
}
/* Zebra striping for rows */
.table tr:nth-child(odd) {
background-color: #f9fafb;
}
/* Hover effect for rows */
.table tr:hover {
background-color: rgba(14, 116, 144, 0.1);
}
/* No data row styling */
.no-data {
text-align: center;
font-size: 14px;
color: #9ca3af;
}
Expliquer le CSS
Conteneur déroulant :
La classe .table-container ajoute overflow: auto pour activer le défilement horizontal et vertical. La propriété height: 400px limite la hauteur du tableau, garantissant un défilement vertical pour les ensembles de données plus volumineux.
En-tête collant :
Les propriétés position: sticky et top: 0 sont appliquées aux éléments
z-index : 2 garantit que l'en-tête est affiché au-dessus du corps du tableau.
Colonne de gauche gelée :
La première colonne est stylisée à l'aide des sélecteurs nth-child(1) pour
Les propriétés position : sticky et left : 0 garantissent que la colonne reste en place lors du défilement horizontal.
Les valeurs de l'index z différencient la cellule (5) et l'en-tête (6) de la colonne pour garantir une superposition appropriée.
Mise en surbrillance de la colonne gelée :
La couleur d'arrière-plan de la colonne gelée est définie sur rouge, avec du texte blanc pour une meilleure visibilité. Vous pouvez le personnaliser en fonction de vos préférences de conception.
Comment cela fonctionne ensemble
Lorsque vous faites défiler verticalement, la position : l'en-tête collant reste en haut du conteneur .table.
Lors du défilement horizontal, la colonne la plus à gauche reste fixe, créant un effet de colonne figée.
La combinaison de overflow: auto et position: sticky garantit que la table reste fonctionnelle et conviviale sur les deux axes.
Améliorations que vous pouvez ajouter
Ajustements réactifs :
Utilisez des requêtes multimédias pour ajuster la largeur des colonnes et la disposition des tableaux pour les écrans plus petits.
Chargement de contenu dynamique :
Utilisez JavaScript pour récupérer et remplir les lignes de manière dynamique pour des ensembles de données plus volumineux.
Fonctionnalités interactives :
Ajoutez des événements de clic sur une ligne, un filtrage ou un tri à l'aide de JavaScript pour améliorer les fonctionnalités.
Pensées finales
En utilisant la norme
