bootstrap 3: Erstellen einer reaktionsschnellen Tabelle mit einer festen ersten Spalte für erweiterte mobile Usability

Mobile Geräte präsentieren einzigartige Herausforderungen beim Anzeigen komplexer Daten in Tische. Um auf diesen Geräten Tabellen reagieren zu können, bietet Bootstrap die "tischresponsive" Klasse an. Möglicherweise ist es jedoch wünschenswert, sicherzustellen, dass die erste Spalte, die häufig Tabellenkopfzeile enthält, fest und sichtbar bleibt, auch wenn der Benutzer horizontal scrolliert.

$ (function (function (function) { var $ table = $ ('. table'); var $ FixedColumn = $ table.clone (). InsertBefore ($ table) .AddClass ('Fixed-Säule'); $ fixeColumn.find ('th: nicht (: Erstkind), TD: nicht (: Erstkind)'). REMET (); $ FixedColumn.find ('tr'). Jede (Funktion (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());
    });
});

. Table-responsiv> .fixed-säule { Position: absolut; Anzeige: Inline-Block; Breite: Auto; Grenzrechte: 1PX Solid #ddd; Hintergrundfarbe: #fff; } @media (min-Width: 768px) { .Table-responsiv> .Fixed-Säule { Anzeige: Keine; } }

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

.
1. Es entfernt dann alle Spalten mit Ausnahme des ersten aus der geklonten Tabelle.
2. Es passt die Höhe der Zeilen in der geklonten Tabelle an die Originaltabelle an.
3. Der CSS -Code Positioniert die geklonte Tabelle absolut mit einer festen Breite und einem Rand und hält sie an Ort und Stelle, während die Originaltabelle horizontal scrolliert.
Dieser Ansatz stellt sicher und Navigation, insbesondere für Tabellen mit zahlreichen Spalten.