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

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

Susan Sarandon
Susan Sarandonoriginal
2024-12-08 09:08:11986parcourir

How to Create a Fixed Header and Column in a Table Using Only 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn