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

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

Copier après la connexion

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

Copier après la connexion

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!

Article précédent：Comment puis-je intégrer des SVG dans des pseudo-éléments CSS ::before et ::after ? Article suivant：Comment animer un div d’une hauteur fixe à sa hauteur automatique dans jQuery ?

Déclaration de ce site Web

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

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2818

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2942

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

2466

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...