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

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

Susan Sarandon
Susan SarandonOriginal
2024-10-31 06:39:02440Durchsuche

How can I achieve rounded corners for an entire table using CSS when border-radius cannot be applied directly to table rows?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn