Comment créer un en-tête et une colonne fixes dans un tableau en utilisant uniquement CSS ?

En-tête et colonne fixes dans un tableau à l'aide de CSS pur

Créer un tableau avec un en-tête et une première colonne fixes à l'aide de CSS pur peut être obtenu en utilisant la position : propriété collante. Cette approche est plus efficace et compatible avec tous les navigateurs que les solutions s'appuyant sur JavaScript ou jQuery.

Solution :

1. Retourner le tableau dans un conteneur :

   `

   `

2. Activer le défilement sur le conteneur :

   `div.container {
   overflow: scroll;
   }`

3. Coller la table en-tête :

   `thead th {
   position : -webkit-sticky ; / pour Safari /
   position : sticky;
   top : 0;
   }`

4. Sticky la première colonne :

   `tbody th {
   position : -webkit-sticky ; / pour Safari /
   position : collant;
   gauche : 0;
   }`

5. Facultatif : Collant l'en-tête de la première colonne en haut à gauche :

   `thead th:first-child {
   gauche : 0;
   z-index : 2;
   }`

Notes supplémentaires :

• Pour des performances optimales, le conteneur doit avoir une largeur et une hauteur maximales définies.
• Si la première colonne contient éléments au lieu de , utilisez tbody td:first-child en CSS au lieu de tbody th.
• Pour styliser davantage l'en-tête et la première colonne, ajustez les propriétés CSS si nécessaire.

Exemple :

<div class="container">
  <table border="1">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>1</th>
        <td>John Doe</td>
        <td>john@example.com</td>
        <td>(555) 123-4567</td>
      </tr>
      <tr>
        <th>2</th>
        <td>Jane Smith</td>
        <td>jane@example.com</td>
        <td>(555) 234-5678</td>
      </tr>
      <!-- More rows... -->
    </tbody>
  </table>
</div>

div.container {
  max-width: 500px;
  max-height: 300px;
  overflow: scroll;
}

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

tbody th {
  position: sticky;
  left: 0;
}

thead th:first-child {
  left: 0;
  z-index: 2;
}

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!