Wie erstelle ich eine Bootstrap-3-Tabelle mit festem Header und scrollbarem Textkörper?

Implementierung einer festen Tabellenüberschrift mit scrollbarem Inhalt

In diesem Artikel befassen wir uns mit der Herausforderung, eine Tabelle mit einer festen und scrollbaren Überschrift zu erstellen Körper mithilfe von Bootstrap 3. Die untersuchten Lösungen zielen darauf ab, die Bootstrap-Ästhetik ohne Kompromisse beizubehalten Funktionalität.

Die Herausforderung

Eine herkömmliche Bootstrap-Tabelle, wie im bereitgestellten Beispiel gezeigt, weist Probleme bei der Einstellung der Höhe für den Tabellenkörper auf. Trotz der Einstellung der Höhe auf 10 Pixel bleibt das Ergebnis unverändert. Dieses Problem erfordert einen alternativen Ansatz.

Fester Header mit Sticky-Positionierung

Eine einfache, aber effektive Lösung besteht in der Verwendung von CSS-Sticky-Positionierung. Dieser Ansatz beinhaltet die Zuweisung von Position: sticky; oben: 0; zu den Tabellenkopfelementen (th), um sicherzustellen, dass sie oben in der Tabelle fixiert bleiben. Hier ist eine Aufschlüsselung der Implementierung:

.tableFixHead          { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

Im obigen Code erstellen wir einen Container mit der Klasse tableFixHead, der overflow: auto; um die Tabelle scrollbar zu machen und eine Höhe von 100 Pixel, um den sichtbaren Teil zu definieren. Den Tabellenkopfelementen wird die Position zugewiesen: sticky; oben: 0; um sie oben im scrollbaren Bereich zu fixieren.

Dieser Ansatz funktioniert effektiv in modernen Browsern wie Chrome, Firefox und Edge.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine Bootstrap-3-Tabelle mit festem Header und scrollbarem Textkörper?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!