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

Nur ​​CSS-scrollbare Tabelle mit festen Überschriften

Herausforderung:

Das Ziel besteht darin, eine scrollbare Tabelle mit festen Überschriften zu erstellen Header, die nur CSS verwenden, um browserübergreifende Kompatibilität sicherzustellen und die folgenden Kriterien zu erfüllen:

• Pflege Spaltenausrichtung zwischen Kopf-, Fuß- und Inhaltszeilen
• Kopf- und Fußzeile unverändert lassen, während der Inhalt vertikal scrollt
• Vermeiden Sie die Abhängigkeit von JavaScript oder jQuery
• Verwenden Sie nur die bereitgestellten Tabellen-Tags (table, colgroup, col, thehead, tbody, tfoot, tr, th, td)

Lösung mit Position: Sticky:

Unterstützung für Position: Sticky sollte vor der Implementierung dieser Lösung überprüft werden. Laut W3C ist eine Sticky-Positioned-Box auf ähnliche Weise angeordnet wie eine Relativ-Positioned-Box. Der Versatz wird jedoch relativ zum nächstgelegenen Vorfahren mit einem Bildlauffeld oder zum Ansichtsfenster berechnet, wenn kein Vorfahre über ein Bildlauffeld verfügt.

Dieses Verhalten stimmt mit dem eines statischen Headers überein. Weisen Sie den Tabellenzellenelementen (th) die Eigenschaft „Sticky Position“ zu. Da eine Tabelle kein Blockelement ist, das ihre zugewiesene Größe respektiert, wird ein Wrapper-Element verwendet, um den Scroll-Überlauf zu definieren.

Beispiel:

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

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

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