Maison >interface Web >tutoriel CSS >Comment créer des coins de table arrondis avec CSS uniquement ?

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

Susan Sarandon
Susan Sarandonoriginal
2024-11-10 10:50:02872parcourir

How to Create Rounded Table Corners with CSS Only?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn