Wie füge ich abgerundete Ecken zu Tabellenzeilen in HTML hinzu?

Tabellenzeilen mit Randradius gestalten

In HTML-Tabellen ist das

Das Element stellt eine Tabellenzeile dar. Während es möglich ist, mithilfe von border-collapse einen festen Rahmen zu Tabellenzeilen hinzuzufügen, stellt das Hinzufügen abgerundeter Ecken zu Zeilen eine Herausforderung dar.

Um diese Einschränkung zu überwinden, können Sie die folgenden CSS-Stile verwenden:

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

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

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

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

Diese Stile bewirken Folgendes:

• Setzen Sie die Eigenschaft „border-collapse“ auf „Trennung“, damit die Ränder innerhalb der Tabellenzellen bleiben.
• Wenden Sie einen festen Rahmen an Elemente.
• Unterdrücken Sie den oberen und linken Rand für die meisten Elemente.
• Wenden Sie abgerundete Ecken auf die oberen linken und oberen rechten Ecken der ersten Reihe an.
• Wenden Sie abgerundete Ecken auf die unteren linken und unteren rechten Ecken der letzten Reihe an.
• Stellen Sie den oberen Rand für wieder her. Elemente in der ersten Zeile und am linken Rand für Elemente in der ersten Spalte.

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