Maison > Article > interface Web > 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 ?
De nombreux développeurs rencontrent des difficultés lorsqu'ils tentent de personnaliser l'apparence des lignes du tableau (
Pour résoudre ce problème, il est essentiel de comprendre que le border-radius ne peut être appliqué qu'à des cellules individuelles (
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!