Wie erstelle ich abgerundete Tischecken nur mit CSS?

Nur ​​mit CSS abgerundete Tabellenecken

Das Erstellen von Tabellen mit abgerundeten Ecken nur mit CSS erweist sich als häufige Herausforderung. Dieser Artikel befasst sich mit diesem Problem und stellt eine Lösung vor, die die Verwendung von Bildern oder JavaScript vermeidet.

Um abgerundete Ecken zu erzielen, wird die Eigenschaft border-radius der Tabelle verwendet. Darüber hinaus werden jeder Zelle separate Ränder hinzugefügt, um das abgerundete Erscheinungsbild beizubehalten. Das folgende CSS-Snippet demonstriert diesen Ansatz:

table {
  border-collapse:separate;
  border:solid black 1px;
  border-radius:6px;
}

td, th {
  border-left:solid black 1px;
  border-top:solid black 1px;
}

th {
  background-color: blue;
  border-top: none;
}

td:first-child, th:first-child {
  border-left: none;
}

In diesem Beispiel hat die Tabelle einen blauen Hintergrund für die Kopfzeilen und einen durchgehenden schwarzen Rahmen um die gesamte Tabelle und jede Zelle. Die Eigenschaft border-radius legt den Radius der Ecken für die Tabelle fest. Um zu verhindern, dass die Ränder das abgerundete Erscheinungsbild unterbrechen, werden sie als separate Ränder für jede Zelle und jeden Header hinzugefügt. Dadurch wird sichergestellt, dass die abgerundeten Ecken auch bei vorhandenen Rändern erhalten bleiben.

Das obige ist der detaillierte Inhalt vonWie erstelle ich abgerundete Tischecken nur mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!