Wie repariert man die erste Spalte in einer responsiven Bootstrap-Tabelle?

Die erste Spalte in einer Responsive Bootstrap-Tabelle korrigieren

Responsive Bootstrap-Tabellen sind eine praktische Möglichkeit, Daten auf Mobilgeräten anzuzeigen. Es kann jedoch eine Herausforderung sein, sicherzustellen, dass die erste Spalte fest bleibt (kein Scrollen möglich). Hier ist eine effektive Lösung dafür:

Methode:

Um die erste Spalte zu reparieren, können wir sie klonen und mithilfe der CSS-Position vor der Originaltabelle platzieren: Absolute. Auf diese Weise bleibt die geklonte Spalte an ihrem Platz, während der Rest der Tabelle scrollt.

Schritt 1: jQuery-Code

Verwenden Sie jQuery, um die Tabelle zu klonen und zu erstellen die feste Spalte:

$(function() {
    var $table = $('.table');
    var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');
    $fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();
});

Schritt 2: CSS-Styling

CSS-Regeln für die feste Spalte definieren:

.table-responsive>.fixed-column {
    position: absolute;
}

So passen Sie die an Erscheinungsbild und Verhalten der festen Spalte können Sie zusätzliche CSS-Eigenschaften wie Breite, Hintergrundfarbe und Rahmen hinzufügen.

Zusätzliche Überlegungen:

• Dies Die Lösung funktioniert am besten für mobile Geräte, bei denen horizontales Scrollen erwartet wird.
• Bei Geräten mit breiteren Bildschirmen möchten Sie möglicherweise die feste Spalte ausblenden, um unnötige Unordnung zu vermeiden.
• Passen Sie den Wert für die Mindestbreite an Die Medienabfrage muss mit dem Haltepunkt übereinstimmen, an dem die feste Spalte ausgeblendet werden soll.

Demo:

[Link zu einer funktionierenden Demo hier]

Das obige ist der detaillierte Inhalt vonWie repariert man die erste Spalte in einer responsiven Bootstrap-Tabelle?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!