Wie erreicht man abgerundete Tischecken nur mit CSS?

Abgerundete Tabellenecken nur mit CSS

Benutzer, die abgerundete Ecken in HTML-Tabellen nur mit CSS erreichen möchten, können auf Schwierigkeiten stoßen, Lösungen zu finden, die das beibehalten Tabellenränder. Hier ist ein umfassender Ansatz, der dieses Problem angeht:

CSS-Implementierung

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;
}

Erklärung

Erstens das Festlegen von Grenzen- Collapse: Separate ermöglicht das Erscheinen von Rändern zwischen Zellen. Dann definiert die Eigenschaft border den äußeren Rand der Tabelle. Der Randradius erzeugt die abgerundeten Ecken.

Innerhalb der Zellen und Überschriften geben border-left und border-top die vertikalen bzw. horizontalen Ränder an. Kopfzeilen haben einen blauen Hintergrund, um die abgerundeten Ecken hervorzuheben. Darüber hinaus wird „border-top“ für Kopfzeilen entfernt, um eine Überlappung mit dem äußeren Rand der Tabelle zu verhindern.

Schließlich werden durch das Entfernen des „border-left“ in den ersten Zellen und Kopfzeilen unnötige vertikale Ränder entfernt. Dies führt zu abgerundeten Ecken für alle Eckzellen, während die vertikalen und horizontalen Ränder innerhalb der Tabelle erhalten bleiben.

Beispielverwendung

<table>
  <thead>
    <tr>
      <th>Blah</th>
      <th>Fwee</th>
      <th>Spoon</th>
    </tr>
  </thead>
  <tr>
    <td>Blah</td>
    <td>Fwee</td>
    <td>Spoon</td>
  </tr>
  <tr>
    <td>Blah</td>
    <td>Fwee</td>
    <td>Spoon</td>
  </tr>
</table>

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