Comment réparer la première colonne d'une table d'amorçage réactive ?

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 :

• Ceci La solution fonctionne mieux pour les appareils mobiles sur lesquels un défilement horizontal est attendu.
• Pour les appareils dotés d'écrans plus larges, vous souhaiterez peut-être masquer la colonne fixe pour éviter tout encombrement inutile.
• Ajustez la valeur de largeur minimale dans la requête multimédia pour correspondre au point d'arrêt où la colonne fixe doit être masquée.

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!