Comment ancrer la première colonne dans les tables réactives Bootstrap 3 pour l'optimisation mobile ?

Assurer une première colonne fixe dans les tableaux réactifs Bootstrap 3

Dans la conception Web réactive, il est crucial de garantir que les tableaux s'adaptent parfaitement aux différents écrans tailles. Bootstrap 3 propose une solution robuste avec la classe « table-responsive » pour les tables réactives. Cependant, il est parfois souhaitable d'ancrer la première colonne d'un tableau lors d'un défilement horizontal, notamment sur les appareils mobiles où l'espace est limité.

Solution : Clonage et positionnement

Pour Pour obtenir une première colonne fixe, nous pouvons la cloner et appliquer un positionnement absolu en utilisant jQuery et CSS. Voici la méthodologie :

1. Création d'un clone : Clonez la table d'origine et insérez-la avant l'original. Appliquez la classe CSS "à colonnes fixes" au clone pour le différencier.
2. Suppression des éléments inutiles : supprimez tous les en-têtes de tableau (th) et les données de tableau (td) à l'exception de ceux du première colonne de la table clonée.
3. Correspondance des hauteurs de lignes : assurez-vous que les hauteurs de lignes de la table clonée correspondent à celles de la table d'origine pour une apparence cohérente.
4. Style CSS : appliquez la classe CSS "à colonne fixe" à la table clonée. Définissez sa position sur absolue, affichez-le en bloc, spécifiez sa largeur, définissez les propriétés de bordure et fournissez une couleur d'arrière-plan personnalisée (si nécessaire).
5. Requêtes multimédias : masquez la table clonée. sur des écrans de plus grande taille à l'aide de requêtes multimédias, telles que @media(min-width:768px).

En suivant ces étapes, vous pouvez facilement créer une table réactive Bootstrap 3 visuellement attrayante et fonctionnelle avec un fixe première colonne, garantissant que les informations essentielles restent visibles même lors d'un défilement horizontal.

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!