Comment rendre les en-têtes de tableaux HTML visibles lors du défilement ?

Utilisation d'un Wrapper Div pour afficher les barres de défilement sur les tableaux HTML

Lors de la création d'un tableau HTML, il peut être nécessaire d'afficher des barres de défilement pour permettre d'afficher le contenu de la table même lorsque la taille de la table dépasse son conteneur.

Pour y parvenir, enveloppez la table dans un emplacement non statiquement positionné <div> et attribuez-lui une propriété CSS overflow:auto. Cela crée une zone de défilement pour le contenu du tableau.

Pour garder les en-têtes du tableau (situés dans la section ) visibles lors du défilement, positionnez-les de manière absolue et placez-les au-dessus de la zone de défilement. Cela empêche les en-têtes d'être masqués par le contenu déroulant.

Voici un exemple qui intègre à la fois des barres de défilement et des en-têtes fixes :

CSS :

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

HTML :

<div>

En appliquant cette technique, vous pouvez créer un tableau HTML qui permet le défilement tout en conservant les en-têtes visibles, comme indiqué dans l'exemple fourni par l'utilisateur.

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!