Comment puis-je obtenir des coins arrondis pour un tableau entier en utilisant CSS lorsque le rayon de bordure ne peut pas être appliqué directement aux lignes du tableau ?

Application du rayon de bordure aux lignes du tableau

De nombreux développeurs rencontrent des difficultés lorsqu'ils tentent de personnaliser l'apparence des lignes du tableau ( ). L'un de ces défis se pose lorsque l'on tente d'appliquer le border-radius aux éléments tr.

Pour résoudre ce problème, il est essentiel de comprendre que le border-radius ne peut être appliqué qu'à des cellules individuelles () dans un tableau. , pas aux lignes ou à la table elle-même. Cependant, il existe une solution astucieuse pour obtenir des coins arrondis pour l'ensemble du tableau :

Style CSS

L'astuce clé réside dans la séparation des bordures du tableau pour chaque cellule à l'aide de la bordure -collapse : propriété séparée. De plus, le style de bordure peut être défini pour affiner l’apparence. L'extrait de code CSS suivant fournit un exemple :

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

Exemple HTML

Une fois les règles de style CSS définies, les appliquer à votre table est simple :

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

Cette solution transforme les cellules individuelles en blocs de construction, permettant un contrôle complet sur l'apparence de la table, y compris les coins arrondis.

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!