Comment créer un tableau d'en-tête fixe avec des barres de défilement horizontales et verticales ?

Tableau d'en-tête fixe avec barre de défilement horizontale et barre de défilement verticale activées

Problème :

Création d'un un tableau d'en-tête fixe avec des barres de défilement horizontales et verticales peut s'avérer difficile lorsque les deux barres de défilement sont requises. Le problème survient lorsque le conteneur extérieur est positionné de manière absolue, ce qui peut provoquer une interférence de la barre de défilement verticale avec l'en-tête, l'empêchant ainsi d'être fixé en place.

HTML :

La structure HTML est relativement simple :

<div class="outer-container">
  <div class="inner-container">
    <div class="table-header">...</div>
    <div class="table-body">...</div>
  </div>
</div>

CSS :

Le Les styles CSS positionnent le conteneur externe de manière absolue et gèrent le contenu débordant :

.outer-container {
  position: absolute;
  overflow: hidden;
}

.inner-container {
  overflow-x: scroll;
}

.table-header {
  position: absolute;
  width: 100%;
}

.table-body {
  overflow-y: scroll;
  height: calc(100% - 40px); /* Adjust this value to match the height of the header */
}

Solution :

La clé pour résoudre ce problème est de gérer le défilement du tableau en-tête et corps synchronisés. Voici une solution possible :

1. Définissez la position de l'en-tête .table sur absolue. Cela le maintiendra positionné dans le .inner-container.
2. Ajoutez un écouteur d'événement de défilement au .table-body.
3. Dans le gestionnaire d'événements, définissez le décalage gauche du .table- en-tête au négatif de la position de défilement horizontal du .table-body. Cela déplacera l'en-tête avec le corps lors du défilement horizontal.

JavaScript/jQuery :

Le script suivant peut être utilisé pour implémenter la synchronisation du défilement. :

$(".table-body").scroll(function() {
  $(".table-header").offset({ left: -this.scrollLeft });
});

Explication :

Ce script garantit que lorsqu'un utilisateur fait défiler le .table-body horizontalement, le .table-header défile avec lui, en conservant sa position fixe.

Remarque :

Ajustez le propriété height du .table-body dans le CSS pour correspondre à la hauteur de l'en-tête .table. Cela évitera que le corps ne déborde sur le collecteur.

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!