Comment implémenter 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

Le problème auquel vous êtes confronté se produit lorsque vous ajoutez une barre de défilement verticale à votre fixe tableau d'en-tête. La barre de défilement verticale interfère avec le positionnement de la barre de défilement horizontale, car les deux sont en conflit pour l'espace dans le conteneur externe.

Structure HTML et CSS

Votre HTML et CSS fournis la structure est un bon point de départ. Le HTML se compose d'une structure imbriquée de tableaux, avec le tableau d'en-tête défini sur un positionnement fixe et le corps du tableau défini sur overflow-y: scroll. Le CSS définit des styles pour les éléments du tableau, y compris des hauteurs et des largeurs fixes pour les cellules d'en-tête et les cellules de corps.

Solution

Pour résoudre le problème et avoir à la fois des éléments horizontaux et les barres de défilement verticales fonctionnent correctement, nous pouvons utiliser une combinaison de CSS et JavaScript :

1. CSS :

   • Supprimer le débordement-x : scroll ; propriété du .inner-container.
   • Ajoutez une classe au .inner-container avec une largeur spécifique, dites "scroll-container".

2. JavaScript :

   • Utilisez JavaScript pour calculer la largeur du .scroll-container et définissez la largeur du .table-body sur cette largeur. Cela garantit que le corps du tableau a la largeur correcte pour s'aligner avec le tableau d'en-tête et éviter les problèmes de barre de défilement horizontale.

Exemple de code

Voici un exemple de la mise à jour code :

/* CSS */
.scroll-container {
  width: 100%;
}

/* JavaScript */
var scrollContainer = document.querySelector(".scroll-container");
var tableBody = document.querySelector(".table-body");
tableBody.style.width = scrollContainer.offsetWidth + "px";

Explication

En supprimant la propriété overflow-x du .inner-container et en définissant une largeur spécifique via JavaScript, nous nous assurons que le .table-body a la largeur correcte pour s'adapter au défilement horizontal et vertical. Cet alignement empêche la barre de défilement verticale d'interférer avec la barre de défilement horizontale et permet aux deux de fonctionner correctement.

Solutions alternatives

De plus, il existe d'autres solutions que vous pourriez envisager :

• Utilisez CSS Grid ou Flexbox pour la mise en page afin d'obtenir un rendu plus flexible et plus réactif. design.
• Explorez en utilisant une bibliothèque CSS comme Bootstrap ou Materialise, qui fournit des composants et des styles prédéfinis qui peuvent simplifier la mise en œuvre de cette fonctionnalité.

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!