Comment puis-je appliquer des coins arrondis aux lignes du tableau à l'aide de CSS lorsque l'application directe du rayon de bordure est limitée ?

Application du rayon de bordure aux lignes du tableau

Lors de la personnalisation de l'apparence des lignes du tableau (), la possibilité d'appliquer le rayon de bordure directement à eux peut être limité. Voici une solution de contournement utilisant les styles CSS :

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

Cette solution définit les bordures des cellules de données individuelles du tableau () pour former la bordure souhaitée autour des lignes. Les propriétés border-collapse et border-spacing garantissent que les cellules sont séparées et ne se chevauchent pas.

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

En appliquant cette solution de contournement, vous pouvez obtenir des coins arrondis pour les lignes de votre tableau, améliorant ainsi efficacement leur attrait visuel.

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!