bootstrap 3 tabella reattiva con prima colonna fissa

Question

Sono mirato al mobile in modo specifico quindi ho una tabella reattiva Bootstrap. È solo un div con la classe bootstrap "table-responsive" e una tabella annidata all'interno delle classi "table table-striped table-boundered table-hover table-condensed".

C'è un modo semplice per assicurarsi che la prima colonna sia fissa (non scorrendo orizzontalmente)? Sui dispositivi mobili, è probabile che ci sia lo scorrimento ogni volta, ma la prima colonna contiene essenzialmente intestazioni di tabella.

Answer 1

Se si stanno indirizzando solo dispositivi mobili, questo potrebbe funzionare per voi: è possibile clonare la prima colonna della tabella e applicare position:absolute in modo che appaia "in primo piano" quando si scorre il resto della tabella.

Per questo avreste bisogno di un po 'di codice jQuery di base e una classe CSS personalizzato:

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; 
    } 
} 

Ecco un working demo per questo approccio