Pouvez-vous utiliser « position : sticky » pour les en-têtes de tableau en dehors du tableau ?

En-têtes de tableau collants

La possibilité de rendre les éléments collants au sein de leurs éléments parents a été introduite dans Webkit. Bien que vous puissiez obtenir un comportement collant pour les en-têtes de tableau dans le tableau lui-même en utilisant JavaScript et le positionnement absolu, il convient de se demander si le positionnement collant peut offrir une solution plus simple.

Est-ce que position : collant fonctionne pour les en-têtes de tableau en dehors du table ?

Oui, il est possible de rendre les titres de tableau collants à l'extérieur du tableau en utilisant le positionnement collant. En ajoutant le CSS suivant, vous pouvez obtenir cet effet :

<code class="css">thead th {
  position: sticky;
  top: 0;
}</code>

Pour utiliser le positionnement collant pour les en-têtes de tableau, votre tableau doit avoir un élément thead contenant les éléments pour chaque en-tête de colonne. Voici un exemple :

<code class="html"><table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
    </tr>
  </thead>
  <tbody>
    <!-- Table body content -->
  </tbody>
</table></code>

Limitations et compatibilité

Il est important de noter que même si le positionnement collant fonctionne pour les en-têtes de tableau dans les navigateurs modernes, la compatibilité peut varier selon les appareils. et les navigateurs. Selon caniuse.com, depuis mars 2018, la prise en charge du positionnement collant est généralement bonne dans les navigateurs modernes : https://caniuse.com/#feat=css-sticky

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!