Comment créer un tableau HTML défilant avec des en-têtes et une première colonne fixes ?

Création d'un tableau HTML défilant avec des en-têtes et une première colonne fixes

Comment créer un tableau HTML avec des en-têtes de colonnes fixes et une première colonne qui reste visible lors du défilement du contenu du tableau ?

Réponse :

Pour obtenir cet effet, vous pouvez utiliser une combinaison de CSS et de JavaScript. Voici comment procéder :

1. Créez un tableau HTML :

<code class="html"><table>
  <thead>
    <tr>
      <th>Column 1 Header</th>
      <th>Column 2 Header</th>
      <th>Column 3 Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <!-- more table rows -->
  </tbody>
</table></code>

2. CSS pour les en-têtes fixes et la première colonne :

<code class="css">table {
  width: 100%;
  overflow: scroll;
}

table thead {
  position: sticky;
  top: 0;
}

table tr td:first-child {
  position: sticky;
  left: 0;
}</code>

Ce CSS garantit que les en-têtes du tableau sont fixés en haut de l'écran lors du défilement et que la première colonne reste fixe à gauche.

3. Exemple amélioré :

Vous pouvez également utiliser une grille CSS avancée pour obtenir un effet similaire avec une meilleure prise en charge de la réactivité et des lecteurs d'écran :

<code class="css">table {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: auto 1fr;
}

table thead {
  grid-row: 1;
  grid-column: 1 / -1;
}

table tr {
  grid-column: 1 / -1;
}

table tr td:first-child {
  grid-column: 1;
}

table tbody {
  overflow: scroll;
}</code>

Remarque : Les exemples fournis peuvent nécessiter quelques ajustements en fonction de la conception spécifique de votre table et des exigences 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!