Warum werden meine Ränder bei Elementen mit Sticky-Position nicht angezeigt?

Rahmenstile werden bei Elementen mit Sticky-Position nicht angezeigt

In CSS ermöglicht die „Sticky“-Position, dass ein Element auf dem Bildschirm fixiert bleibt selbst wenn der umgebende Inhalt scrollt. Bei der Anwendung auf ein Element mit Rändern werden die Ränder jedoch möglicherweise nicht wie erwartet angezeigt.

Ursache:

Dieses Problem entsteht durch die Verwendung des „border-“ Einsturz“-Eigenschaft. Bei der Einstellung „Zusammenklappen“ werden die Ränder zwischen benachbarten Elementen kombiniert und auf diese Elemente verteilt. Bei Elementen mit Sticky-Position kann der obere Rand des Sticky-Elements mit dem Rand des enthaltenden Elements (z. B. der Tabelle) verschmelzen, während der untere Rand mit dem Rand des nachfolgenden Elements verschmelzen kann.

Lösung:

Um dieses Problem zu beheben, können Sie die Eigenschaft „border-collapse“ von „collapse“ in „separate“ ändern. Dadurch wird verhindert, dass die Ränder kombiniert werden, und es wird sichergestellt, dass jedes Element seinen eigenen eindeutigen Rand hat.

Alternativ können Sie den Rand für jedes einzelne Element mithilfe von CSS-Regeln explizit definieren wie:

table thead th {
  border-top: 2px solid;
  border-bottom: 2px solid;
}

Dadurch wird sichergestellt, dass der Rand des Sticky-Tabellenkopfes direkt auf die Zellen angewendet wird, ohne dass dies durch die Randreduzierung beeinträchtigt wird Eigenschaft.

Beispiel:

Implementieren Sie die folgenden CSS-Stile, um das gewünschte Verhalten zu erreichen:

table {
  border-collapse: separate;
}

table thead th {
  position: sticky;
  top: 0;
  border-top: 2px solid;
  border-bottom: 2px solid;
}

Das obige ist der detaillierte Inhalt vonWarum werden meine Ränder bei Elementen mit Sticky-Position nicht angezeigt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!