Wie kann ich mithilfe von CSS abgerundete Ecken auf Tabellenzeilen anwenden, wenn die Anwendung direkter Randradien begrenzt ist?

Anwenden des Randradius auf Tabellenzeilen

Beim Anpassen des Erscheinungsbilds von Tabellenzeilen () besteht die Möglichkeit, einen Randradius anzuwenden direkt auf sie beschränkt werden kann. Hier ist eine Problemumgehung mithilfe von CSS-Stilen:

<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 Lösung legt die Ränder einzelner Tabellendatenzellen () fest, um den gewünschten Rahmen um die Zeilen zu bilden. Die Eigenschaften „border-collapse“ und „border-spacing“ stellen sicher, dass die Zellen getrennt sind und sich nicht überlappen.

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

Durch die Anwendung dieser Problemumgehung können Sie abgerundete Ecken für Ihre Tabellenzeilen erzielen und so deren optische Attraktivität effektiv verbessern.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS abgerundete Ecken auf Tabellenzeilen anwenden, wenn die Anwendung direkter Randradien begrenzt ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!