Wie füge ich mit CSS abgerundete Ecken zu Tabellenzellen hinzu?

Umrandungsradius auf Tabellenzellen anwenden

Um abgerundete Ecken zu Tabellenzeilen (tr) hinzuzufügen, ziehen Sie den folgenden Ansatz in Betracht:

• CSS-Einschränkungen: Beachten Sie, dass Sie border-radius nicht direkt auf tr- oder Tabellenelemente anwenden können. Stattdessen müssen Sie es auf einzelne Tabellenzellen anwenden (td).
• Separater Rahmen und Abstand für Zellen:

<code class="css">table {
  border-collapse: separate;
  border-spacing: 0;
}

td {
  border: solid 1px #000;
  border-style: none solid solid none;
  padding: 10px;
}</code>

• Eckenstile:

<code class="css">tr:first-child td:first-child { border-top-left-radius: 10px; }
tr:first-child td:last-child { border-top-right-radius: 10px; }

tr:last-child td:first-child { border-bottom-left-radius: 10px; }
tr:last-child td:last-child { border-bottom-right-radius: 10px; }</code>

• Randstile für obere und linke Zellen:

<code class="css">tr:first-child td { border-top-style: solid; }
tr td:first-child { border-left-style: solid; }</code>

Diese Technik ermöglicht die Erstellung abgerundeter Ecken auf dem Tisch unter Beibehaltung des gewünschten Randes und Abstands.

Das obige ist der detaillierte Inhalt vonWie füge ich mit CSS abgerundete Ecken zu Tabellenzellen hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!