Comment créer des coins de table arrondis en utilisant uniquement CSS ?

Coins de table arrondis uniquement en CSS

Créer des tableaux avec des coins arrondis en utilisant uniquement CSS s'avère être un défi courant. Cet article aborde ce problème en présentant une solution qui évite l'utilisation d'images ou de JavaScript.

Pour obtenir des coins arrondis, la propriété border-radius du tableau est utilisée. De plus, des bordures distinctes sont ajoutées à chaque cellule pour préserver l’apparence arrondie. L'extrait CSS suivant illustre cette approche :

table {
  border-collapse:separate;
  border:solid black 1px;
  border-radius:6px;
}

td, th {
  border-left:solid black 1px;
  border-top:solid black 1px;
}

th {
  background-color: blue;
  border-top: none;
}

td:first-child, th:first-child {
  border-left: none;
}

Dans cet exemple, le tableau a un fond bleu pour les en-têtes et une bordure noire unie autour de l'ensemble du tableau et de chaque cellule. La propriété border-radius définit le rayon des coins du tableau. Pour éviter que les bordures n'interrompent l'apparence arrondie, elles sont ajoutées sous forme de bordures distinctes pour chaque cellule et en-tête. Cela garantit que les coins arrondis restent intacts même lorsque des bordures sont présentes.

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!