Wie friere ich die erste Tabellenspalte ein, um die mobile Benutzerfreundlichkeit in Bootstrap 3 zu verbessern?

Bootstrap 3: Erstellen einer reaktionsfähigen Tabelle mit einer festen ersten Spalte für verbesserte mobile Benutzerfreundlichkeit

Mobile Geräte stellen einzigartige Herausforderungen dar, wenn komplexe Daten angezeigt werden Tische. Um Tabellen auf diesen Geräten responsiv zu machen, bietet Bootstrap die Klasse „table-responsive“ an. Möglicherweise möchten Sie jedoch sicherstellen, dass die erste Spalte, die häufig Tabellenüberschriften enthält, auch dann fixiert und sichtbar bleibt, wenn der Benutzer horizontal scrollt.

Ein Ansatz, dies zu erreichen, ist eine Kombination aus jQuery und CSS:

jQuery-Code

$(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

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

Erklärung

1. Der jQuery-Code klont die ursprüngliche Tabelle und fügt sie vor der Tabelle ein, wodurch ihr die Klasse „feste Spalte“ zugewiesen wird.
2. Anschließend werden alle Spalten bis auf die erste aus der geklonten Tabelle entfernt .
3. Die Höhe der Zeilen in der geklonten Tabelle wird so angepasst, dass sie mit der Originaltabelle übereinstimmt.
4. Der CSS-Code positioniert die geklonte Tabelle absolut mit einer festen Breite und einem festen Rand und hält sie dabei an Ort und Stelle Die ursprüngliche Tabelle scrollt horizontal.

Dieser Ansatz stellt sicher, dass die erste Spalte der Tabelle auf Mobilgeräten fixiert bleibt, was die Benutzerfreundlichkeit und Navigation verbessert, insbesondere bei Tabellen mit zahlreichen Spalten.

Das obige ist der detaillierte Inhalt vonWie friere ich die erste Tabellenspalte ein, um die mobile Benutzerfreundlichkeit in Bootstrap 3 zu verbessern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!