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

Configuration d'un tableau déroulant avec des en-têtes fixes à l'aide de CSS

Votre tableau a à la fois un corps déroulant et un en-tête fixe, mais vous ne savez pas comment obtenir cet effet . Pour résoudre ce problème, nous séparons les éléments d'en-tête et de corps en HTML en utilisant et .

<table>
  <thead>
    <tr>
      <th>head1</th>
      <th>head2</th>
      <th>head3</th>
      <th>head4</th>
    </tr>
  </thead>
  <tbody>
    <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>
  </tbody>
</table>

Ensuite, nous définissons display: block pour et pour séparer leur comportement et permettre le défilement sur le corps sans affecter l'en-tête.

table tbody, table thead {
  display: block;
}

Nous définissons les propriétés de débordement et de hauteur pour le corps :

table tbody {
  overflow: auto;
  height: 100px;
}

Puisque l'en-tête et le corps sont visuellement séparés mais techniquement liés, nous définissons des largeurs statiques pour le et éléments pour garantir un bon alignement des colonnes.

th {
  width: 72px;
}

td {
  width: 72px;
}

N'oubliez pas d'inclure le formatage HTML approprié, tel que pour chaque ligne, y compris la ligne d'en-tête.

<tr>
  <th>head1</th>
  <th>head2</th>
  <th>head3</th>
  <th>head4</th>
</tr>

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!