Maison >interface Web >tutoriel CSS >CSS seul peut-il créer un tableau défilant compatible avec plusieurs navigateurs avec des en-têtes fixes ?

CSS seul peut-il créer un tableau défilant compatible avec plusieurs navigateurs avec des en-têtes fixes ?

Patricia Arquetteoriginal: 2024-12-06 13:39:17281parcourir

Can CSS Alone Create a Cross-Browser Compatible Scrollable Table with Fixed Headers?

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

Question :

Existe-t-il une solution CSS uniquement pour créer un tableau déroulant tableaux avec en-têtes fixes multi-navigateurs conforme ?

Exigences :

Maintenir l'alignement des colonnes entre l'en-tête, le pied de page et les lignes de contenu
Gardez l'en-tête et le pied de page fixes pendant que le le contenu défile verticalement
Aucun jQuery ou JavaScript requis
Utilisez uniquement les éléments liés aux tables tags (table, thead, tbody, tr, th, td)

Solution utilisant la position : Sticky :

Remarque de compatibilité : Vérifiez la prise en charge de position:sticky avant d'utiliser cette solution.

position:sticky positionne un élément par rapport à l'ancêtre de défilement le plus proche ou au fenêtre s'il n'y a pas d'ancêtres défilants. Ce comportement correspond à l'en-tête collant souhaité.

Cependant, l'attribution de position:sticky à

, ou les balises rencontrent des problèmes dans divers navigateurs. Au lieu de cela, attribuez la propriété sticky à

cellules dans un élément wrapper qui définit le débordement de défilement.

Code :

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

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

/* Styling */
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 scope="col">head1</th>
        <th scope="col">head2</th>
        <th scope="col">head3</th>
        <th scope="col">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>
      <!-- additional rows omitted for brevity -->
    </tbody>
  </table>
</div>

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!

JavaScript jquery css if for while using Property this position overflow viewport column table tbody td tr th

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

Article précédent：Comment puis-je intégrer des SVG dans des pseudo-éléments CSS ::before et ::after ?Article suivant：Comment puis-je intégrer des SVG dans des pseudo-éléments CSS ::before et ::after ?

Articles Liés

Voir plus