web-dev-qa-db-fra.com

bootstrap 3 tableau réactif avec première colonne fixe

Je cible spécifiquement les mobiles, j'ai donc une table Bootstrap responsive. C'est juste un div avec la classe bootstrap "table-responsive" et une table imbriquée à l'intérieur avec les classes "table table-rayé table-bordé table-survolez table-condensé".

Existe-t-il un moyen simple de s'assurer que la première colonne est fixe (ne défile pas horizontalement)? Sur les appareils mobiles, il est probable qu'il y aura un défilement à chaque fois, mais la première colonne contient essentiellement des en-têtes de tableau.

csstwitter-bootstraphtml-tableresponsive-design
19
CGross

Si vous ne ciblez que les appareils mobiles, cela peut vous convenir: vous pouvez cloner la première colonne de votre tableau et appliquer position:absolute pour qu'il apparaisse "devant" lorsque vous faites défiler le reste du tableau.

Pour cela, vous auriez besoin d'un code jquery de base et d'une classe CSS personnalisée:

jQuery 

$(function(){
    var $table = $('.table');
    //Make a clone of our table
    var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');

    //Remove everything except for first column
    $fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();

    //Match the height of the rows to that of the original table's
    $fixedColumn.find('tr').each(function (i, elem) {
        $(this).height($table.find('tr:eq(' + i + ')').height());
    });
});

[~ # ~] css [~ # ~] 

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

Voici un démo de travail pour cette approche

41
koala_dev