Edit - Titre: Y at - il une autre façon d'atteindre border-collapse:collapse
en CSS
(afin d'avoir une table d'angle effondré, arrondi)?
Comme il s'avère que le simple fait de réduire les bordures du tableau ne résout pas le problème racine, j'ai mis à jour le titre pour mieux refléter la discussion.
J'essaie de faire une table avec des coins arrondis en utilisant la CSS3
border-radius
propriété. Les styles de table que j'utilise ressemblent à ceci:
table {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px
}
Voici le problème. Je veux également définir la border-collapse:collapse
propriété, et lorsque cela est défini border-radius
ne fonctionne plus. Existe-t-il un moyen basé sur CSS pour obtenir le même effet que border-collapse:collapse
sans l'utiliser réellement?
Modifications:
J'ai créé une page simple pour illustrer le problème ici (Firefox / Safari uniquement).
Il semble qu'une grande partie du problème est que le fait de définir la table pour avoir des coins arrondis n'affecte pas les coins des td
éléments de coin . Si le tableau n'était qu'une seule couleur, ce ne serait pas un problème car je pouvais juste td
arrondir les coins supérieur et inférieur pour la première et la dernière ligne respectivement. Cependant, j'utilise différentes couleurs d'arrière-plan pour le tableau pour différencier les titres et pour les rayures, de sorte que les td
éléments intérieurs montreraient également leurs coins arrondis.
Résumé des solutions proposées:
Entourer la table d'un autre élément aux coins arrondis ne fonctionne pas car les coins carrés de la table "saignent".
La spécification de la largeur de la bordure à 0 ne réduit pas le tableau.
Les td
coins inférieurs sont toujours carrés après avoir défini l'espacement des cellules à zéro.
Utiliser plutôt JavaScript fonctionne en évitant le problème.
Solutions possibles:
Les tables sont générées en PHP, donc je pourrais simplement appliquer une classe différente à chacun des th / tds externes et styliser chaque coin séparément. Je préfère ne pas le faire, car ce n'est pas très élégant et un peu pénible à appliquer à plusieurs tables, alors continuez à faire des suggestions.
La solution 2 possible consiste à utiliser JavaScript (jQuery, en particulier) pour styliser les coins. Cette solution fonctionne également, mais toujours pas tout à fait ce que je recherche (je sais que je suis difficile). J'ai deux réserves:
- c'est un site très léger, et je voudrais garder JavaScript au minimum
- une partie de l'attrait que l'utilisation de border-radius a pour moi est la dégradation gracieuse et l'amélioration progressive. En utilisant border-radius pour tous les coins arrondis, j'espère avoir un site régulièrement arrondi dans les navigateurs compatibles CSS3 et un site toujours carré dans les autres (je vous regarde, IE).
Je sais qu'essayer de faire cela avec CSS3 aujourd'hui peut sembler inutile, mais j'ai mes raisons. Je voudrais également souligner que ce problème est le résultat de la spécification w3c, et non d'une mauvaise prise en charge de CSS3, donc toute solution sera toujours pertinente et utile lorsque CSS3 aura une prise en charge plus répandue.