Comment obtenir des coins de table arrondis en utilisant uniquement CSS ?

Coins de table arrondis avec CSS uniquement

Les utilisateurs cherchant à obtenir des coins arrondis sur des tableaux HTML avec uniquement CSS peuvent rencontrer des difficultés à trouver des solutions qui préservent le les bordures du tableau. Voici une approche globale qui répond à ce problème :

Mise en œuvre CSS

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

Explication

Tout d'abord, définir la frontière- Réduire : séparer permet d'afficher des bordures entre les cellules. Ensuite, la propriété border définit la bordure extérieure du tableau. Le border-radius crée les coins arrondis.

Dans les cellules et les en-têtes, border-left et border-top spécifient respectivement les bordures verticales et horizontales. Les en-têtes ont un fond bleu pour mettre en valeur les coins arrondis. De plus, la bordure supérieure est supprimée pour les en-têtes afin d'éviter tout chevauchement avec la bordure extérieure du tableau.

Enfin, la suppression de la bordure gauche sur les premières cellules et les en-têtes élimine les bordures verticales inutiles. Il en résulte des coins arrondis pour toutes les cellules de coin tout en préservant les bordures verticales et horizontales du tableau.

Exemple d'utilisation

<table>
  <thead>
    <tr>
      <th>Blah</th>
      <th>Fwee</th>
      <th>Spoon</th>
    </tr>
  </thead>
  <tr>
    <td>Blah</td>
    <td>Fwee</td>
    <td>Spoon</td>
  </tr>
  <tr>
    <td>Blah</td>
    <td>Fwee</td>
    <td>Spoon</td>
  </tr>
</table>

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!