Correction de la première colonne dans une table d'amorçage réactive
Les tables d'amorçage réactives sont un moyen pratique d'afficher des données sur des appareils mobiles. Cependant, s'assurer que la première colonne reste fixe (sans défilement) peut être un défi. Voici une solution efficace pour cela :
Méthode :
Pour corriger la première colonne, nous pouvons la cloner et la placer devant la table d'origine en utilisant la position du CSS : absolu. De cette façon, la colonne clonée restera à sa place pendant que le reste du tableau défile.
Étape 1 : Code jQuery
Utilisez jQuery pour cloner la table et créer la colonne fixe :
$(function() { var $table = $('.table'); var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column'); $fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove(); });
Étape 2 : Style CSS
Définir les règles CSS pour la colonne fixe :
.table-responsive>.fixed-column { position: absolute; }
Pour ajuster la l'apparence et le comportement de la colonne fixe, vous pouvez ajouter des propriétés CSS supplémentaires telles que la largeur, la couleur d'arrière-plan et la bordure.
Considérations supplémentaires :
Démo :
[Lien vers une démo fonctionnelle ici]
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!