Comment créer un tableau d'en-tête fixe dans un div défilant ?

Comment créer un tableau d'en-tête fixe dans un div défilant

Un défi courant en développement Web consiste à créer un tableau avec un en-tête fixe qui reste visible même lorsque les utilisateurs font défiler verticalement à travers le corps de la table. Dans cet article, nous explorerons une solution à ce problème en utilisant deux approches : une solution CSS personnalisée et une solution basée sur JavaScript.

Solution CSS personnalisée

La La solution CSS personnalisée repose sur le positionnement absolu de l'en-tête du tableau et le maintien de sa position même lorsque le corps du tableau défile. Le CSS suivant peut être utilisé :

#table-wrapper {
  position: relative;
}

#table-scroll {
  height: 250px;
  overflow: auto;
  margin-top: 20px;
}

#table-wrapper table {
  width: 100%;
}

#table-wrapper table thead th {
  position: absolute;
  top: 0;
  z-index: 2;
  height: 20px;
  width: 35%;
  border: 1px solid red;
}

Cette méthode positionne simplement l'en-tête au-dessus du corps du tableau et maintient sa position supérieure pendant le défilement.

Solution JavaScript

Une approche alternative utilise JavaScript pour corriger l'en-tête et gérer le comportement de défilement. L'extrait de code suivant illustre cette approche :

// Get the table and its header
var table = document.getElementById("table");
var header = table.querySelector("thead");

// Clone the header
var cloneHeader = header.cloneNode(true);

// Create a wrapper div for the cloned header
var headerWrapper = document.createElement("div");
headerWrapper.classList.add("header-wrapper");

// Insert the cloned header into the wrapper
headerWrapper.appendChild(cloneHeader);

// Insert the header wrapper into the table
table.insertBefore(headerWrapper, table.firstChild);

// Add event listener for scrolling
table.addEventListener("scroll", function() {
  headerWrapper.style.left = table.scrollLeft + "px";
});

Cette méthode JavaScript duplique l'en-tête, le positionne fixe en haut du tableau et met à jour sa position à gauche à mesure que le tableau défile pour maintenir l'alignement avec le corps du tableau. .

Les deux solutions résolvent efficacement le problème de la création d'une table d'en-tête fixe au sein d'un div défilant. Le choix de l'approche dépend des exigences spécifiques et des préférences du projet Web.

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!