Wie kann ich abgerundete Tischecken nur mit CSS erstellen?

Abgerundete Tischecken nur mit CSS

Im Bereich Webdesign ist die Schaffung optisch ansprechender und benutzerfreundlicher Oberflächen von größter Bedeutung. Eine dieser Herausforderungen für Designer besteht darin, den Tischen abgerundete Ecken hinzuzufügen und gleichzeitig ein konsistentes und ästhetisch ansprechendes Layout beizubehalten. In diesem Artikel wird eine Lösung für diese Herausforderung mit reinem CSS und ohne zusätzliche Bilder oder JavaScript untersucht.

Die Herausforderung

Das Ziel besteht darin, eine einfache HTML-Tabelle mit abgerundeten Ecken zu erstellen, ähnlich der Abbildung unten:

[Bild einer Tabelle mit abgerundeten Ecken]

Erster Versuch

Der erste Ansatz mit -moz-border-radius liefert keine abgerundeten Ecken und behält gleichzeitig die Zellränder bei . Um dieses Problem anzugehen, verwenden wir die folgende Technik:

Technik mit separaten Rändern

Durch die Definition separater Ränder für die Tabelle und ihre Zellen können wir den gewünschten Effekt erzielen. Hier ist der CSS-Code für diesen Ansatz:

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

Beispiel

Anwenden des obigen CSS auf eine HTML-Tabelle erhalten wir das folgende Ergebnis:

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

Schlussfolgerung

Mit dieser Technik werden mithilfe von reinem CSS effektiv abgerundete Ecken für HTML-Tabellen erreicht, sodass keine externen Bilder oder JavaScript erforderlich sind. Es behält die Zellränder bei und sorgt für ein konsistentes und optisch ansprechendes Layout.

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