Wie bleiben Tabellenüberschriften fixiert, während der Tabellenkörper gescrollt wird?

Fixieren von Tabellenüberschriften mit scrollendem Textkörper

Das Beibehalten fester Tabellenkopfzeilen bei gleichzeitigem Scrollen des Textkörpers ist eine häufige Anforderung in der Webentwicklung. Um dies zu erreichen, verwenden Sie den folgenden Ansatz:

1. Tabelleninhalt in zwei verschachtelte Elemente einschließen:

• Erstellen Sie ein äußeres Tabellenelement (z. B. #mainTable), um die gesamte Tabelle aufzunehmen.
• Erstellen Sie ein inneres Tabellenelement (z. B. #mainTable). , #innerTable), um den Tabellenkörper zu enthalten, der gescrollt werden muss.

2. Höhe der äußeren Tabelle festlegen:

• Wenden Sie mithilfe von CSS eine feste Höhe auf die äußere Tabelle an (z. B. #mainTable { height: 500px; }).

3. Innere Tabelle positionieren:

• Positionieren Sie die innere Tabelle mithilfe von CSS absolut innerhalb der äußeren Tabelle (z. B. #innerTable { position: absolute; top: 0; bottom: 0; width: 100 %; }).

4. Überschriften korrigieren:

• Position anwenden: klebrig; zu den Kopfzeilen der inneren Tabelle (z. B. #innerTable th { position: sticky; top: 0; }).

5. Scrollen aktivieren:

• Stellen Sie sicher, dass die Höhe der inneren Tabelle die Höhe der äußeren Tabelle überschreitet, was einen vertikalen Überlauf auslöst.
• Aktivieren Sie das Scrollen in der inneren Tabelle mithilfe von CSS (z. B. #innerTable { Überlauf: automatisch; }).

Beispiel:

<div></div>

Das obige ist der detaillierte Inhalt vonWie bleiben Tabellenüberschriften fixiert, während der Tabellenkörper gescrollt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!