Heim >Web-Frontend >CSS-Tutorial >Wie erstelle ich eine Tabelle mit fester Kopfzeile und scrollbarem Textkörper?

Wie erstelle ich eine Tabelle mit fester Kopfzeile und scrollbarem Textkörper?

Barbara Streisand
Barbara StreisandOriginal
2024-12-10 13:01:21403Durchsuche

How to Create a Table with a Fixed Header and Scrollable Body?

Scrollen des Tabellenkörpers mit festem Kopf erreichen

Bei der Webentwicklung besteht eine häufige Herausforderung darin, Tabellen zu erstellen, bei denen die Kopfzeilen fest bleiben, während der Tabellenkörper fest bleibt Schriftrollen. Diese Situation hat Programmierer oft verwirrt.

Eine Lösung besteht darin, JavaScript zu verwenden, um die Höhe der inneren Tabelle festzulegen, während CSS das Styling übernimmt. Wie in diesem beispielhaften CodePen (http://www.cssplay.co.uk/menu/tablescroll.html) gezeigt, bietet Experiment Nr. 2 eine effektive Lösung.

Der Schlüssel besteht darin, die Höhe des Inneren festzulegen Tabelle mithilfe von JavaScript, um die gewünschte Tabellengröße zu erreichen. Der CSS-Code stellt sicher, dass die Tabellenköpfe beim Scrollen des Tabellenkörpers fixiert bleiben, sodass eine Tabelle entsteht, die sich wie eine komprimierte Excel-Tabelle verhält.

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn