Comment geler la première colonne du tableau pour une utilisation mobile améliorée dans Bootstrap 3 ?

Bootstrap 3 : Création d'un tableau réactif avec une première colonne fixe pour une utilisation mobile améliorée

Les appareils mobiles présentent des défis uniques lors de l'affichage de données complexes dans tableaux. Pour rendre les tables réactives sur ces appareils, Bootstrap propose la classe « table-responsive ». Cependant, vous souhaiterez peut-être vous assurer que la première colonne, contenant souvent des en-têtes de tableau, reste fixe et visible même lorsque l'utilisateur fait défiler horizontalement.

Une approche pour y parvenir consiste à combiner jQuery et CSS :

Code jQuery

$(function(){
    var $table = $('.table');
    var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');
    $fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();
    $fixedColumn.find('tr').each(function (i, elem) {
        $(this).height($table.find('tr:eq(' + i + ')').height());
    });
});

Code CSS

.table-responsive>.fixed-column {
    position: absolute;
    display: inline-block;
    width: auto;
    border-right: 1px solid #ddd;
    background-color: #fff;
}
@media(min-width:768px) {
    .table-responsive>.fixed-column {
        display: none;
    }
}

Explication

1. Le code jQuery clone la table d'origine et l'insère avant la table, lui donnant la classe "colonne fixe".
2. Il supprime ensuite toutes les colonnes sauf la première de la table clonée .
3. Il ajuste la hauteur des lignes de la table clonée pour qu'elle corresponde à la table d'origine.
4. Le code CSS positionne la table clonée de manière absolue avec une largeur et une bordure fixes, la gardant en place tout en le tableau d'origine défile horizontalement.

Cette approche garantit que la première colonne du tableau reste fixe sur les appareils mobiles, améliorant ainsi la convivialité et la navigation, en particulier pour les tableaux comportant de nombreuses colonnes.

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!