Comment ajouter des coins arrondis aux cellules d'un tableau à l'aide de CSS ?

Application d'un rayon de bordure aux cellules du tableau

Pour ajouter des coins arrondis aux lignes du tableau (tr), envisagez l'approche suivante :

• Limites CSS : notez que vous ne pouvez pas appliquer directement border-radius aux éléments tr ou table. Au lieu de cela, vous devez l'appliquer à des cellules individuelles du tableau (td).
• Bordure et remplissage séparés pour les cellules :

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

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

• Styles de coin :

<code class="css">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; }</code>

• Styles de bordure pour les cellules du haut et de gauche :

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

Cette technique permet de créer des coins arrondis sur la table tout en conservant la bordure et l'espacement souhaités.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!