Comment créer un tableau déroulant avec des en-têtes fixes en utilisant uniquement CSS ?

Tableau défilant avec en-têtes fixes utilisant CSS

Solution CSS uniquement pour les en-têtes fixes

Problème :

Créez un tableau déroulant avec des en-têtes et des pieds de page fixes en utilisant uniquement CSS et balises de table valides, sans nécessiter JavaScript ou jQuery. Assurez-vous que l'alignement des colonnes reste cohérent entre les lignes d'en-tête, de pied de page et de contenu.

Solution :

Utilisation de la position : collante

1. Enveloppez la table dans un div : Cela définira le défilement zone.

   div {
     display: inline-block;
     height: 150px;
     overflow: auto;
   }

2. Appliquer la position : collante aux en-têtes du tableau :

   table th {
     position: -webkit-sticky;
     position: sticky;
     top: 0;
   }

Style

Personnalisez l'apparence du tableau comme nécessaire :

table {
  border-collapse: collapse;
}

th {
  background-color: #1976D2;
  color: #fff;
}

th,
td {
  padding: 1em .5em;
}

table tr {
  color: #212121;
}

table tr:nth-child(odd) {
  background-color: #BBDEFB;
}

Exemple :

<div>
  <table border="0">
    <thead>
      <tr>
        <th scope="col">head1</th>
        <th scope="col">head2</th>
        <th scope="col">head3</th>
        <th scope="col">head4</th>
      </tr>
    </thead>
    <tbody>
      <!-- Insert rows here -->
    </tbody>
  </table>
</div>

Remarque :

• Vérifier la compatibilité avec le poste : collant avant d'utiliser cette solution en utilisant des ressources comme CanIUse.
• Dans certains navigateurs, l'en-tête peut ne pas s'aligner parfaitement avec le contenu. Ajustez la valeur supérieure de la propriété sticky si nécessaire.
• Cette solution permet uniquement le défilement vertical. Le défilement horizontal n'est pas pris en charge.

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!