Propriété border-radius et border-collapse de CSS3: les collapsus ne se mélangent pas. Comment utiliser border-radius pour créer une table avec des coins arrondis?

Edit – Original Title: Existe t-il un autre moyen de réduire border-collapse:collapse réduire en CSS (pour avoir une table de coin arrondie et réduite)?

Comme il s’avère que le simple fait de réduire les frontières de la table ne résout pas le problème fondamental, j’ai mis à jour le titre pour mieux refléter la discussion.

J’essaie de créer une table avec des coins arrondis en utilisant la propriété CSS3 border-radius . 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 propriété border-collapse:collapse , et lorsque cela est défini, border-radius ne fonctionne plus. Existe-t-il une méthode basée sur le CSS que je peux obtenir avec le même effet que le border-collapse:collapse sans l’utiliser?

Edits:

J’ai fait une page simple pour démontrer le problème ici (Firefox / Safari uniquement).

Il semble qu’une grande partie du problème réside dans le fait que la mise en place de coins arrondis sur la table n’affecte pas les coins des éléments td coin. Si la table était d’une seule couleur, cela ne poserait pas de problème, car je pouvais simplement arrondir les coins supérieur et inférieur du premier et du dernier rang. Cependant, j’utilise différentes couleurs d’arrière-plan pour différencier les en-têtes et les bandes, de sorte que les éléments internes td afficheront également leurs coins arrondis.

Résumé des solutions proposées:

Entourer la table d’un autre élément avec des 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 la table.

Les coins inférieurs sont toujours carrés après la mise à zéro des cellules.

Utiliser JavaScript à la place 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 styler chaque coin séparément. Je préférerais ne pas le faire, car ce n’est pas très élégant et un peu pénible à appliquer à plusieurs tables, alors n’hésitez pas à nous faire part de vos suggestions.

La solution possible 2 consiste à utiliser JavaScript (spécifiquement, jQuery) pour styliser les coins. Cette solution fonctionne également, mais pas toujours ce que je cherche (je sais que je suis difficile). J’ai deux réserves:

  1. c’est un site très léger, et je voudrais garder JavaScript au minimum
  2. Une partie de l’appel que l’utilisation de border-radius a pour moi est une dégradation gracieuse et une amélioration progressive. En utilisant border-radius pour tous les coins arrondis, j’espère avoir un site arrondi de manière cohérente dans les navigateurs compatibles CSS3 et un site carré cohérent dans les autres (je vous regarde, IE).

Je sais qu’essayer de le faire 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 de la prise en charge médiocre de CSS3, de sorte que toute solution sera toujours pertinente et utile lorsque CSS3 aura un support plus répandu.

Je l’ai compris. Vous devez juste utiliser des sélecteurs spéciaux.

Le problème avec l’arrondissement des coins de la table était que les éléments td ne devenaient pas aussi arrondis. Vous pouvez résoudre ce problème en faisant quelque chose comme ceci:

 table tr:last-child td:first-child { border-bottom-left-radius: 10px; } table tr:last-child td:last-child { border-bottom-right-radius: 10px; } 

Maintenant, tout s’arrange correctement, sauf qu’il ya toujours le problème de l’ border-collapse: collapse des border-collapse: collapse tout casser. Une solution consiste à définir cellspacing="0" dans le cellspacing="0" HTML (merci, Joel ).

La méthode suivante fonctionne (testée dans Chrome) en utilisant une box-shadow avec un étalement de 1px au lieu d’une bordure “réelle”.

 table { border-collapse: collapse; border-radius: 30px; border-style: hidden; /* hide standard table (collapsed) border */ box-shadow: 0 0 0 1px #666; /* this draws the table border */ } td { border: 1px solid #ccc; } 

Si vous voulez une solution uniquement en CSS (pas besoin de définir cellspacing=0 dans le HTML) qui autorise des bordures 1px (ce que vous ne pouvez pas faire avec la solution border-spacing: 0 ), je préfère faire ce qui suit:

  • Définissez une border-right et une border-bottom pour vos cellules de table ( td et th )
  • Donner aux cellules de la première rangée un border-top
  • Donner aux cellules de la première colonne une border-left
  • En utilisant les sélecteurs first-child et last-child , arrondissez les angles appropriés pour les cellules de tableau dans les quatre coins.

Voir une démo ici.

Compte tenu du code HTML suivant:

VOIR l’exemple ci-dessous:

 .custom-table{margin:30px;} table { border-collapse: separate; border-spacing: 0; min-width: 350px; } table tr th, table tr td { border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; padding: 5px; } table tr th:first-child, table tr th:last-child{ border-top:solid 1px #bbb;} table tr th:first-child, table tr td:first-child { border-left: 1px solid #bbb; } table tr th:first-child, table tr td:first-child { border-left: 1px solid #bbb; } table tr th { background: #eee; text-align: left; } table.Info tr th, table.Info tr:first-child td { border-top: 1px solid #bbb; } /* top-left border-radius */ table tr:first-child th:first-child, table.Info tr:first-child td:first-child { border-top-left-radius: 6px; } /* top-right border-radius */ table tr:first-child th:last-child, table.Info tr:first-child td:last-child { border-top-right-radius: 6px; } /* bottom-left border-radius */ table tr:last-child td:first-child { border-bottom-left-radius: 6px; } /* bottom-right border-radius */ table tr:last-child td:last-child { border-bottom-right-radius: 6px; } 
 
item1 item2
item1 item2
item1 item2
item1 item2

Avez-vous essayé d’utiliser la table{border-spacing: 0} au lieu de la table{border-collapse: collapse} ???

Vous devrez probablement placer un autre élément autour de la table et le styliser avec une bordure arrondie.

Le brouillon de travail spécifie que border-radius ne s’applique pas aux éléments de table lorsque la valeur de border-collapse est collapse .

Comme Ian l’a dit, la solution consiste à imbriquer la table dans un div et à la définir ainsi:

 .table_wrapper { border-radius: 5px; overflow: hidden; } 

Avec overflow:hidden , les coins carrés ne saignent pas à travers le div.

À ma connaissance, la seule façon de le faire serait de modifier toutes les cellules comme suit:

 table td { border-right-width: 0px; border-bottom-width: 0px; } 

Et puis pour obtenir la bordure en bas et à droite

 table tr td:last-child { border-right-width: 1px; } table tr:last-child td { border-bottom-width: 1px; } 

:last-child n’est pas valide dans ie6, mais si vous utilisez border-radius je suppose que vous vous en fichez.

MODIFIER:

Après avoir consulté votre page d’exemple, il semble que vous puissiez y remédier avec l’espacement des cellules et le remplissage.

Les bords gris épais que vous voyez sont en fait l’arrière-plan du tableau (vous pouvez le voir clairement si vous changez la couleur de la bordure en rouge). Si vous définissez la cellule à zéro (ou de manière équivalente: td, th { margin:0; } ) les “bordures” grises disparaîtront.

EDIT 2:

Je ne trouve pas le moyen de le faire avec une seule table. Si vous modifiez votre ligne d’en-tête en une table nestede, vous pourrez peut-être obtenir l’effet souhaité, mais le travail sera plus complexe et non dynamic.

J’ai essayé une solution de contournement en utilisant les pseudo-éléments :before et :after le thead th:first-child et thead th:last-child

En combinaison avec l’encapsulation de la table avec un

 table thead th:first-child:before{ content:" "; position:absolute; top:-1px; left:-1px; width:15px; height:15px; border-left:1px solid #ccc; border-top:1px solid #ccc; -webkit-border-radius:5px 0px 0px; } table thead th:last-child:after{ content:" "; position:absolute; top:-1px; right:-1px; width:15px; height:15px; border-right:1px solid #ccc; border-top:1px solid #ccc; -webkit-border-radius:0px 5px 0px 0px; } 

voir jsfiddle

Fonctionne pour moi en chrome (13.0.782.215) Faites-moi savoir si cela fonctionne pour vous dans d’autres navigateurs.

J’ai eu le même problème. Supprimez entièrement border-collapse et utilisez: cellspacing="0" cellpadding="0" dans le document HTML. Exemple:

 

Les réponses données ne fonctionnent que lorsqu’il n’y a pas de bordures autour de la table, ce qui est très limitatif!

J’ai une macro dans SASS pour ce faire, qui supporte entièrement les bordures externes et internes, obtenant le même style que le border-collapse: réduire sans le spécifier.

Testé dans FF / IE8 / Safari / Chrome.

Donne de belles bordures arrondies en CSS pur dans tous les navigateurs, mais IE8 (se dégrade normalement) car IE8 ne supporte pas border-radius 🙁

Certains navigateurs plus anciens peuvent nécessiter des préfixes de fournisseurs pour fonctionner avec border-radius , alors n’hésitez pas à append ces préfixes à votre code si nécessaire.

Cette réponse n’est pas la plus courte – mais cela fonctionne.

 .roundedTable { border-radius: 20px / 20px; border: 1px solid #333333; border-spacing: 0px; } .roundedTable th { padding: 4px; background: #ffcc11; border-left: 1px solid #333333; } .roundedTable th:first-child { border-left: none; border-top-left-radius: 20px; } .roundedTable th:last-child { border-top-right-radius: 20px; } .roundedTable tr td { border: 1px solid #333333; border-right: none; border-bottom: none; padding: 4px; } .roundedTable tr td:first-child { border-left: none; } 

Pour appliquer ce style, changez simplement votre

 

tag à ce qui suit:

 

et veillez à inclure les styles CSS ci-dessus dans votre code HTML.

J’espère que cela t’aides.

Pour une table bordée et défilable, utilisez ceci (remplacer les variables, les textes de départ $ )

Si vous utilisez thead , tfoot ou th , remplacez simplement tr:first-child et tr-last-child et td avec eux.

 #table-wrap { border: $border solid $color-border; border-radius: $border-radius; } table { border-collapse: collapse; border-spacing: 0; } table td { border: $border solid $color-border; } table td:first-child { border-left: none; } table td:last-child { border-right: none; } table tr:first-child td { border-top: none; } table tr:last-child td { border-bottom: none; } table tr:first-child td:first-child { border-top-left-radius: $border-radius; } table tr:first-child td:last-child { border-top-right-radius: $border-radius; } table tr:last-child td:first-child { border-bottom-left-radius: $border-radius; } table tr:last-child td:last-child { border-bottom-right-radius: $border-radius; } 

HTML:

 
1 2
3 4

Je viens d’écrire un jeu de CSS fou pour cela qui semble fonctionner parfaitement:

 table { border-collapse: separate; border-spacing: 0; width: 100%; } table td, table th { border-right: 1px solid #CCC; border-top: 1px solid #CCC; padding: 3px 5px; vertical-align: top; } table td:first-child, table th:first-child { border-left: 1px solid #CCC; } table tr:last-child td, table tr:last-child th { border-bottom: 1px solid #CCC; } table thead + tbody tr:first-child td { border-top: 0; } table thead td, table th { background: #EDEDED; } /* complicated rounded table corners! */ table thead:first-child tr:last-child td:first-child { border-bottom-left-radius: 0; } table thead:first-child tr:last-child td:last-child { border-bottom-right-radius: 0; } table thead + tbody tr:first-child td:first-child { border-top-left-radius: 0; } table thead + tbody tr:first-child td:last-child { border-top-right-radius: 0; } table tr:first-child td:first-child, table thead tr:first-child td:first-child { border-top-left-radius: 5px; } table tr:first-child td:last-child, table thead tr:first-child td:last-child { border-top-right-radius: 5px; } table tr:last-child td:first-child, table thead:last-child tr:last-child td:first-child { border-bottom-left-radius: 5px; } table tr:last-child td:last-child, table thead:last-child tr:last-child td:last-child { border-bottom-right-radius: 5px; } /* end complicated rounded table corners !*/ 

Solution avec border-collapse: séparer pour la table et l’affichage: table en ligne pour tbody et thead.

 table { width: 100%; border-collapse: separate; border-spacing: 0px; background: transparent; } table thead { display: inline-table; width: 100%; background: #fc0 url(../images/bg-heading.png) repeat-x 0% 0; -webkit-border-top-left-radius: 7px; -moz-border-radius-topleft: 7px; -webkit-border-top-right-radius: 7px; -moz-border-radius-topright: 7px; border-radius: 7px 7px 0px 0px; padding: 1px; padding-bottom: 0; } table tbody { border: 1px solid #ddd; display: inline-table; width: 100%; border-top: none; } 

Je suis nouveau avec HTML et CSS et je cherchais aussi une solution pour cela, voici ce que je trouve.

 table,th,td { border: 1px solid black; border-spacing: 0 } /* add border-radius to table only*/ table { border-radius: 25px } /* then add border-radius to top left border of left heading cell */ th:first-child { border-radius: 25px 0 0 0 } /* then add border-radius to top right border of right heading cell */ th:last-child { border-radius: 0 25px 0 0 } /* then add border-radius to bottom left border of left cell of last row */ tr:last-child td:first-child { border-radius: 0 0 0 25px } /* then add border-radius to bottom right border of right cell of last row */ tr:last-child td:last-child { border-radius: 0 0 25px 0 } 

Je l’essaie, devinez ce que ça marche 🙂

J’ai trouvé cette réponse après avoir rencontré le même problème, mais j’ai trouvé que c’était assez simple: il suffit de donner le débordement de la table: hidden

Pas besoin d’un élément d’emballage. Certes, je ne sais pas si cela aurait fonctionné il y a 7 ans lorsque la question a été posée, mais cela fonctionne maintenant.

En fait, vous pouvez append votre table dans un div comme son emballage. puis atsortingbuez ces codes CSS au wrapper:

 .table-wrapper { border: 1px solid #f00; border-radius: 5px; overflow: hidden; } table { border-collapse: collapse; } 

J’ai commencé à expérimenter avec “display” et j’ai trouvé que: border-radius , border , margin , padding , dans une table sont affichés avec:

 display: inline-table; 

Par exemple

 table tbody tr { display: inline-table; width: 960px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } 

Mais il faut définir une width de chaque colonne

 tr td.first-column { width: 100px; } tr td.second-column { width: 860px; } 

Voici un exemple récent de la façon d’implémenter une table avec des coins arrondis à partir de http://medialoot.com/preview/css-ui-kit/demo.html . Il est basé sur les sélecteurs spéciaux proposés par Joel Potter ci-dessus. Comme vous pouvez le voir, cela inclut également de la magie pour rendre IE un peu heureux. Il comprend des styles supplémentaires pour alterner la couleur des lignes:

 table-wrapper { width: 460px; background: #E0E0E0; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#E9E9E9', endColorstr='#D7D7D7'); background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#D7D7D7)); background: -moz-linear-gradient(top, #E9E9E9, #D7D7D7); padding: 8px; -webkit-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff; -moz-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff; -o-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff; -khtml-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff; box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff; -webkit-border-radius: 10px; /*-moz-border-radius: 10px; firefox doesn't allow rounding of tables yet*/ -o-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; margin-bottom: 20px; } .table-wrapper table { width: 460px; } .table-header { height: 35px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; text-align: center; line-height: 34px; text-decoration: none; font-weight: bold; } .table-row td { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; text-align: left; text-decoration: none; font-weight: normal; color: #858585; padding: 10px; border-left: 1px solid #ccc; -khtml-box-shadow: 0px 1px 0px #B2B3B5; -webkit-box-shadow: 0px 1px 0px #B2B3B5; -moz-box-shadow: 0px 1px 0px #ddd; -o-box-shadow: 0px 1px 0px #B2B3B5; box-shadow: 0px 1px 0px #B2B3B5; } tr th { border-left: 1px solid #ccc; } tr th:first-child { -khtml-border-top-left-radius: 8px; -webkit-border-top-left-radius: 8px; -o-border-top-left-radius: 8px; /*-moz-border-radius-topleft: 8px; firefox doesn't allow rounding of tables yet*/ border-top-left-radius: 8px; border: none; } tr td:first-child { border: none; } tr th:last-child { -khtml-border-top-right-radius: 8px; -webkit-border-top-right-radius: 8px; -o-border-top-right-radius: 8px; /*-moz-border-radius-topright: 8px; firefox doesn't allow rounding of tables yet*/ border-top-right-radius: 8px; } tr { background: #fff; } tr:nth-child(odd) { background: #F3F3F3; } tr:nth-child(even) { background: #fff; } tr:last-child td:first-child { -khtml-border-bottom-left-radius: 8px; -webkit-border-bottom-left-radius: 8px; -o-border-bottom-left-radius: 8px; /*-moz-border-radius-bottomleft: 8px; firefox doesn't allow rounding of tables yet*/ border-bottom-left-radius: 8px; } tr:last-child td:last-child { -khtml-border-bottom-right-radius: 8px; -webkit-border-bottom-right-radius: 8px; -o-border-bottom-right-radius: 8px; /*-moz-border-radius-bottomright: 8px; firefox doesn't allow rounding of tables yet*/ border-bottom-right-radius: 8px; } 

Table à coins arrondis et à cellules bordées. Utiliser la solution @Ramon Tayag .

La clé est d’utiliser l’ border-spacing: 0 comme il le fait remarquer.

Solution utilisant SCSS .

 $line: 1px solid #979797; $radius: 5px; table { border: $line; border-radius: $radius; border-spacing: 0; th, tr:not(:last-child) td { border-bottom: $line; } th:not(:last-child), td:not(:last-child) { border-right: $line; } } 

Border-Rayius est maintenant officiellement pris en charge. Ainsi, dans tous les exemples ci-dessus, vous pouvez supprimer le préfixe “-moz-“.

Une autre astuce consiste à utiliser la même couleur pour les lignes supérieures et inférieures que votre bordure. Avec les trois couleurs identiques, il se fond et ressemble à une table parfaitement arrondie, même si ce n’est pas physiquement.

Je fais toujours comme ça avec Sass

 table { border-radius: 0.25rem; thead tr:first-child th { &:first-child { border-top-left-radius: 0.25rem; } &:last-child { border-top-right-radius: 0.25rem; } } tbody tr:last-child td { &:first-child { border-bottom-left-radius: 0.25rem; } &:last-child { border-bottom-right-radius: 0.25rem; } } }