Comment garder les en-têtes de tableau HTML visibles lors du défilement du corps ?

Comment afficher la barre de défilement sur un tableau HTML

Lors de la création de tableaux HTML, il est parfois nécessaire que les en-têtes restent visibles, même lorsque le contenu du tableau défile.

Pour y parvenir, enveloppez la table dans un div positionné de manière non statique qui possède une propriété CSS overflow:auto. Ensuite, positionnez les éléments dans l'en-tête du tableau de manière absolue, comme indiqué ci-dessous :

#table-wrapper {
  position:relative;
}
#table-scroll {
  height:150px;
  overflow:auto;  
  margin-top:20px;
}
#table-wrapper table {
  width:100%;
}
#table-wrapper table * {
  background:yellow;
  color:black;
}
#table-wrapper table thead th .text {
  position:absolute;   
  top:-20px;
  z-index:2;
  height:20px;
  width:35%;
  border:1px solid red;
}

<div>

Cela créera un tableau avec un en-tête fixe et un corps défilant, similaire à la méthode 2 dans l'URL fournie.

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!