Wie erstelle ich eine scrollbare Nur-CSS-Tabelle mit festen Überschriften?

Nur ​​CSS-scrollbare Tabelle mit festen Kopfzeilen

Bei dieser Frage möchte der Benutzer scrollbare Tabellen mit festen Kopf- und Fußzeilen mithilfe von CSS erstellen nur. Zu ihren spezifischen Anforderungen gehören:

• Beibehalten der Spaltenausrichtung zwischen Kopf-, Fuß- und Inhaltszeilen
• Beibehalten der Kopf- und Fußzeile, während der Inhalt vertikal scrollen kann
• Dies wird ausschließlich mit HTML-Tabellen-Tags und CSS-Regeln erreicht
• Gewährleistung der browserübergreifenden Funktion Kompatibilität

Antwort

Eine mögliche Lösung ist die Nutzung der Position: klebrige Eigenschaft. Laut W3C definiert position: sticky die Position eines Elements im Verhältnis zu seinem Vorfahren mit einem Bildlauffeld oder dem Ansichtsfenster, wenn kein Vorfahre scrollt.

Bei bestimmten Browsern (z. B. Chrome, IE, Edge) sind jedoch Probleme aufgetreten beim Zuweisen der Position: an Tabellenkopfzeilen kleben ( oder ). Ein alternativer Ansatz, der für Tabellen zu funktionieren scheint, ist die Zuweisung zu Tabellenzellen ().

Um den gewünschten Effekt zu erzielen, kann der Benutzer den folgenden Code berücksichtigen:

div {
  display: inline-block;
  height: 150px;
  overflow: auto
}

table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

Dieser Code umschließt die Tabelle in ein div mit overflow: auto, um einen scrollbaren Bereich einzurichten. Den Tabellenüberschriften wird eine Sticky-Position zugewiesen, um sicherzustellen, dass sie beim vertikalen Scrollen des Inhalts fixiert bleiben.

Zusätzliches Styling für Ästhetik

Das Snippet enthält zusätzliches CSS-Styling zur Verbesserung des Das Erscheinungsbild der Tabelle, aber diese Ästhetik ist für die Hauptfunktionalität einer scrollbaren Tabelle mit festen Kopfzeilen nicht unbedingt erforderlich.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine scrollbare Nur-CSS-Tabelle mit festen Überschriften?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!