Comment créer une table Bootstrap 3 avec un en-tête fixe et un corps défilant ?

Implémentation d'un en-tête fixe de tableau avec un contenu défilant

Dans cet article, nous aborderons le défi de créer un tableau avec un en-tête fixe et un contenu défilant corps utilisant Bootstrap 3. Les solutions explorées visent à préserver l'esthétique Bootstrap sans compromettre la fonctionnalité.

Le Défi

Une table Bootstrap conventionnelle, comme le montre l'exemple fourni, présente des problèmes de réglage de la hauteur du corps de la table. Malgré le réglage de la hauteur sur 10px, le résultat reste inchangé. Ce problème nécessite une approche alternative.

En-tête fixe avec positionnement collant

Une solution simple mais efficace consiste à utiliser le positionnement collant CSS. Cette approche consiste à attribuer une position : collante ; haut : 0 ; aux éléments d'en-tête (th) du tableau, en veillant à ce qu'ils restent fixés en haut du tableau. Voici un aperçu de l'implémentation :

.tableFixHead          { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

Dans le code ci-dessus, nous créons un conteneur avec la classe tableFixHead, qui inclut overflow: auto; pour rendre le tableau défilant et une hauteur de 100px pour définir la partie visible. Les éléments d'en-tête du tableau se voient attribuer la position : collant ; haut : 0 ; pour les fixer en haut de la zone de défilement.

Cette approche fonctionne efficacement dans les navigateurs modernes tels que Chrome, Firefox et Edge.

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!