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

pour garantir que l'en-tête reste visible lors du défilement vertical.
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

et .
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

et quelques lignes de CSS, nous avons créé un tableau puissant et réactif avec un en-tête collant et une colonne de gauche figée. Cette approche est légère, facile à mettre en œuvre et fonctionne de manière transparente sur les navigateurs modernes.

Que vous créiez des tableaux de bord, affichiez des rapports ou manipuliez de grands ensembles de données, cette méthode garantit une conception épurée et professionnelle qui est également conviviale. Essayez-le et dites-moi comment cela fonctionne pour votre projet ! ?