bootstrap 3: Création d'une table réactive avec une première colonne fixe pour une convivialité mobile améliorée

Une approche pour y parvenir est par une combinaison de jQuery et CSS:

jQuery code

$ (fonction () { var $ table = $ ('. Table'); var $ fixecolumn = $ table.clone (). insertBefore ($ table) .addclass ('fixe-column'); $ fixecolumn.find ('th: pas (: premier-enfant), td: non (: premier-enfant)'). relève (); $ fixecolumn.find ('tr'). Chaque (fonction (i, elem) { $ (this) .height ($ table.find ('tr: eq (' i ')'). height ()); }); });

$(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());
    });
});

css code

. Position: absolue; Affichage: bloc en ligne; Largeur: Auto; Border-droite: 1px solide #ddd; Color d'arrière-plan: #FFF; } @Media (Min-Width: 768px) { .Table-sensive> .fixed-column { Affichage: aucun; } }

$(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());
    });
});

explication

Le code jQuery clones la table d'origine et l'inserte avant la table, lui donnant la classe "Colonne fixe". "
Il supprime ensuite toutes les colonnes à l'exception de la première de la table clonée.
Il ajuste la hauteur des lignes dans la table clonée pour correspondre à la table d'origine.
Le code CSS positionne la table clonée absolument avec une largeur et une bordure fixe, en la gardant en place tandis que la table d'origine fait défiler horizontalement. et navigation, en particulier pour les tables avec de nombreuses colonnes.