Domanda tabella reattiva 3 bootstrap con prima colonna fissa


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.


17
2017-11-01 23:53


origine


risposte:


Se stai prendendo di mira solo i dispositivi mobili, questo potrebbe funzionare per te: puoi clonare la prima colonna nella tabella e applicare position:absolute quindi appare "davanti" quando si scorre il resto del tavolo.

Per questo è necessario un codice jquery di base e una classe CSS personalizzata:

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 demo funzionante per questo approccio


40
2017-11-02 07:15