Wie pinne ich die erste Spalte in einer Responsive Bootstrap 3-Tabelle?

Anheften der ersten Spalte in einer Responsive Bootstrap 3-Tabelle

Die Verbesserung der Reaktionsfähigkeit von Tabellen ist für das mobile Webdesign von entscheidender Bedeutung, insbesondere wenn der Bildschirm begrenzt ist Immobilien machen es erforderlich, bestimmte Inhalte zu priorisieren. In solchen Szenarien kann es wünschenswert sein, sicherzustellen, dass die erste Spalte einer Tabelle fest bleibt, um einen einfachen Zugriff auf wichtige Informationen zu ermöglichen.

Eine effektive Lösung zum Erreichen dieses Ziels ist die Nutzung von JavaScript und CSS. Indem wir einen Klon der ersten Spalte erstellen und eine absolute Positionierung anwenden, können wir den Rest der Tabelle horizontal scrollen lassen, während die geklonte Spalte an Ort und Stelle bleibt. Diese Technik stellt sicher, dass die erste Spalte, die oft wichtige Informationen wie Tabellenüberschriften enthält, unabhängig vom Scrollen sichtbar bleibt.

jQuery-Implementierung

Kapseln Sie den JavaScript-Code innerhalb des $( function(){...})-Block, der die ordnungsgemäße Ausführung beim DOM-Laden gewährleistet. Erstellen Sie einen jQuery-Klon der vorhandenen Tabelle, fügen Sie ihn vor der Originaltabelle ein und weisen Sie ihm die benutzerdefinierte Klasse „feste Spalte“ zu, um ihn von anderen abzuheben.

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

Passen Sie die Höhe der Zeilen der geklonten Spalte an entsprechen denen der Originaltabelle.

<code class="javascript">$fixedColumn.find('tr').each(function(i, elem) {
    $(this).height($table.find('tr:eq(' + i + ')').height());
});</code>

CSS-Stil

Definieren Sie den CSS-Stil, um die geklonte Spalte absolut zu positionieren, legen Sie ihre Breite fest und wenden Sie einen geeigneten Rahmen und Hintergrund an Farbe. Nutzen Sie Medienabfragen, um die geklonte Spalte für Ansichtsfenstergrößen über 768 Pixel auszublenden und so eine optimale Anzeige auf großen Bildschirmen zu gewährleisten.

<code class="css">.table-responsive > .fixed-column {
    position: absolute;
    display: inline-block;
    width: auto;
    border-right: 1px solid #ddd;
    background-color: #fff;
}  </code>

<code class="css">@media(min-width:768px) {
    .table-responsive > .fixed-column {
        display: none;
    }
}</code>

Realweltanwendung

Die Die unten bereitgestellte begleitende Demo zeigt diese Technik in Aktion und repariert effektiv die erste Spalte, selbst wenn der Rest der Tabelle auf Mobilgeräten horizontal gescrollt wird.

Fazit

Die Kombination von jQuery und CSS ermöglichen das Anheften der ersten Spalte in einer responsiven Bootstrap 3-Tabelle und stellen so sicher, dass wichtige Inhalte unabhängig von der Geräteausrichtung sichtbar bleiben. Durch das Klonen des ersten

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