Comment créer des en-têtes et des colonnes fixes dans des tableaux HTML ?

Création de tableaux HTML avec des en-têtes et des colonnes fixes

Lorsque vous travaillez avec des tableaux HTML volumineux, il peut être frustrant de perdre la trace des en-têtes de colonnes importants et les données de ligne pendant que vous faites défiler. Heureusement, il existe des techniques CSS et JavaScript pour créer des en-têtes et des colonnes fixes, garantissant ainsi une navigation facile.

Comment obtenir des en-têtes et des colonnes fixes :

Pour y parvenir , nous pouvons utiliser l'approche suivante :

1. Créer un en-tête fixe : Utilisez CSS pour corriger le élément en position en utilisant la propriété position: sticky. Cela gardera les en-têtes visibles en haut du tableau lorsque vous faites défiler.
2. Corriger la première colonne : Pour corriger la première colonne, créez un
   qui enveloppe les cellules de la première colonne. Définissez la position de ce

   à sticky et la propriété left à 0. Cela ancre la colonne au bord le plus à gauche de la fenêtre.

Exemple de mise en œuvre :

Voici un exemple de code pour obtenir cet effet :

<code class="html"><style>
  thead {
    position: sticky;
    top: 0;
  }

  .fixed-column {
    position: sticky;
    left: 0;
  }
</style>

<table>
  <thead>
    <tr>
      <th class="fixed-column">ID</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <!-- Data rows -->
  </tbody>
</table></code>

Remarque : L'exemple fourni dans la réponse sur jsBin démontre une implémentation fonctionnelle de cette technique. Cependant, il est important de noter que cette approche peut avoir des limites ou nécessiter des ajustements en fonction des exigences spécifiques de compatibilité du navigateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!