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

Coins de table arrondis avec CSS uniquement

La création de coins de table arrondis est une exigence de conception courante. Voici comment obtenir cet effet en utilisant du CSS pur :

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

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

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

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

Cette approche utilise des bordures distinctes pour le tableau et les cellules. En plaçant le rayon de bordure sur la table, les coins sont arrondis. Les bordures séparées garantissent que les cellules ont toujours des bords droits. La propriété border-top est supprimée des en-têtes du tableau (th) pour les aligner avec les bordures des données du tableau (td). Enfin, la bordure gauche des premières cellules de chaque ligne est supprimée pour compléter l'effet de coin arrondi.

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!