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

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

Cette question appelle une solution CSS uniquement pour créer des tableaux déroulants avec des en-têtes fixes. Les exigences pour cette solution incluent :

1. Maintenir l'alignement des colonnes sur les lignes d'en-tête, de pied de page et de contenu
2. Autoriser l'en-tête et le pied de page à rester fixes pendant que le contenu défile verticalement
3. Utilisez uniquement les balises HTML liées aux tableaux (table, tr, th, td, etc.) sans JavaScript ni jQuery

Solution utilisant la position : Sticky

Une solution possible consiste à utiliser la position : propriété collante. Voici comment ça marche :

Utilisation de la position : sticky

Le positionnement sticky attribue à un élément une position relative sauf que le décalage est calculé concernant l'ancêtre le plus proche avec un scroll boîte ou la fenêtre s'il n'y a pas un tel ancêtre. Ce comportement est idéal pour les en-têtes de tableaux fixes.

Le code

Le code suivant illustre cette technique :

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

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

/* == Just general styling, not relevant :) == */

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;
}

<div>
  <table border="0">
    <thead>
      <tr>
        <th>head1</th>
        <th>head2</th>
        <th>head3</th>
        <th>head4</th>
      </tr>
    </thead>
    <tr>
      <td>row 1, cell 1</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
  </table>
</div>

Ce code L'extrait place la table dans un div wrapper avec une barre de défilement. En attribuant position: sticky aux éléments dans l'en-tête du tableau, les en-têtes restent fixes lorsque le contenu défile verticalement.

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!