Wie kann ich mit CSS abgerundete Ecken für eine gesamte Tabelle erzielen, wenn der Randradius nicht direkt auf Tabellenzeilen angewendet werden kann?

Anwenden des Randradius auf Tabellenzeilen

Viele Entwickler haben Schwierigkeiten, wenn sie versuchen, das Erscheinungsbild von Tabellenzeilen anzupassen ( ). Eine solche Herausforderung entsteht, wenn man versucht, den Randradius auf tr-Elemente anzuwenden.

Um dieses Problem zu lösen, ist es wichtig zu verstehen, dass der Randradius nur auf einzelne Zellen () innerhalb einer Tabelle angewendet werden kann , nicht auf die Zeilen oder die Tabelle selbst. Es gibt jedoch eine clevere Lösung, um abgerundete Ecken für die gesamte Tabelle zu erreichen:

CSS-Styling

Der entscheidende Trick besteht darin, Tabellenränder für jede Zelle mithilfe des Rahmens zu trennen -collapse: separates Eigentum. Zusätzlich kann der Rahmenstil eingestellt werden, um das Erscheinungsbild zu verfeinern. Das folgende CSS-Code-Snippet stellt ein Beispiel dar:

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

HTML-Beispiel

Sobald die CSS-Stilregeln definiert sind, ist ihre Anwendung auf Ihre Tabelle ganz einfach:

<code class="html"><table>
  <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
  </tr>
  <tr>
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table></code>

Diese Lösung wandelt einzelne Zellen in Bausteine ​​um und ermöglicht so eine vollständige Kontrolle über das Erscheinungsbild der Tabelle, einschließlich abgerundeter Ecken.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS abgerundete Ecken für eine gesamte Tabelle erzielen, wenn der Randradius nicht direkt auf Tabellenzeilen angewendet werden kann?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!