Warum funktionieren Rahmenstile bei fest positionierten Tabellenüberschriften nicht und wie kann ich das Problem beheben?

Der Rahmenstil funktioniert nicht mit Sticky-Position-Elementen

Sticky-Positionierung ist eine praktische CSS-Eigenschaft, die es ermöglicht, dass Elemente an ihrem Platz bleiben Bildschirm, auch wenn der Benutzer auf der Seite nach unten scrollt. Allerdings kann es zu Komplikationen kommen, wenn Sie versuchen, Rahmenstile auf Sticky-Elemente anzuwenden.

Das Problem:

Im bereitgestellten Beispiel ist eine Tabellenüberschrift festgelegt Sticky- und Inline-Rahmenstile wurden auf die Elemente. Allerdings werden die Rahmenstile nicht angezeigt, wenn in der Tabelle gescrollt wird, sodass die Kopfzeile nicht gestylt bleibt.

Die Ursache:

Der Konflikt entsteht durch die Verwendung von Rahmen- Zusammenbruch: Zusammenbruch. Mit dieser Eigenschaft werden die Ränder benachbarter Tabellenzellen zusammengeklappt und zusammengeführt. In Kombination mit einem Sticky-Header gehen die zusammengeführten Ränder beim Scrollen verloren.

Die Lösung:

Um dieses Problem zu lösen, können Sie border-collapse verwenden: separat, was den Zusammenbruch der Grenzen verhindert. Darüber hinaus sollten Sie Ihre Ränder so anpassen, dass sie auf bestimmten Seiten der Zellen und Überschriften sitzen. Dadurch wird sichergestellt, dass die Ränder auch beim Scrollen sichtbar bleiben.

CSS-Lösung:

#wrapper {
  width: 100%;
  height: 150px;
  overflow: auto;
}

table {
  width: 100%;
  text-align: center;
  border-collapse: separate; /* Don't collapse */
  border-spacing: 0;
}

table th {
  /* Apply both top and bottom borders to the <th> */
  border-top: 2px solid;
  border-bottom: 2px solid;
  border-right: 2px solid;
}

table td {
  /* For cells, apply the border to one of each side only (right but not left, bottom but not top) */
  border-bottom: 2px solid;
  border-right: 2px solid;
}

table th:first-child,
table td:first-child {
  /* Apply a left border on the first <td> or <th> in a row */
  border-left: 2px solid;
}

table thead th {
  position: sticky;
  top: 0;
  background-color: #edecec;
}

Durch die Anwendung dieser Stile bleiben die Rahmenstile auch beim Scrollen sichtbar Die Tabelle wird gescrollt, wobei das gewünschte Design des Sticky-Headers erhalten bleibt.

Das obige ist der detaillierte Inhalt vonWarum funktionieren Rahmenstile bei fest positionierten Tabellenüberschriften nicht und wie kann ich das Problem beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!