Maison >interface Web >tutoriel CSS >Comment puis-je créer des coins de table arrondis en utilisant uniquement CSS ?

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

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-11-09 10:55:02634parcourir

How Can I Create Rounded Table Corners Using CSS Only?

Coins de table arrondis en utilisant CSS uniquement

Dans le domaine de la conception Web, la création d'interfaces visuellement attrayantes et conviviales est primordiale. L’un des défis auxquels sont confrontés les concepteurs consiste à ajouter des coins arrondis aux tables tout en conservant une disposition cohérente et esthétique. Cet article explore une solution à ce défi en utilisant du CSS pur, sans aucune image supplémentaire ni JavaScript.

Le défi

L'objectif est de créer un tableau HTML simple avec des coins arrondis, similaire à l'illustration. ci-dessous :

[Image d'un tableau avec des coins arrondis]

Tentative initiale

L'approche initiale utilisant -moz-border-radius ne parvient pas à fournir des coins arrondis tout en conservant les bordures des cellules . Pour résoudre ce problème, nous utilisons la technique suivante :

Technique des bordures séparées

En définissant des bordures séparées pour le tableau et ses cellules, nous pouvons obtenir l'effet souhaité. Voici le code CSS pour 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;
}

Exemple

En appliquant le CSS ci-dessus à un tableau HTML, nous obtenons le résultat suivant :

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

Conclusion

Cette technique permet d'obtenir efficacement des coins arrondis pour les tableaux HTML en utilisant du CSS pur, éliminant ainsi le besoin d'images externes ou de JavaScript. Il conserve les bordures des cellules et offre une disposition cohérente et visuellement attrayante.

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