Le border-radius de la table ne fonctionne pas comme prévu

Question

Je veux ajouter un rayon de bordure autour de l'ensemble du tableau. Mais le code suivant ne fonctionne pas dans les dernières versions de Firefox et Google Chrome.

table {
  border-spacing: 0;
  width: 600px;
  margin: 30px;
  border: 1px solid #CCCCCC;
  border-radius: 6px 6px 6px 6px;
  -moz-border-radius: 6px 6px 6px 6px;
  -webkit-border-radius: 6px 6px 6px 6px;
  box-shadow: 0 1px 1px #CCCCCC;
}

table th:first-child {
  border-radius: 6px 0 0 0;
  -moz-border-radius: 6px 0 0 0;
  -webkit-border-radius: 6px 0 0 0;
}

table th:last-child {
  border-radius: 0 6px 0 0;
  -moz-border-radius: 0 6px 0 0;
  -webkit-border-radius: 0 6px 0 0;
}

table td:first-child,
.bordered th:first-child {
  border-left: medium none;
}

table th {
  background-color: #DCE9F9;
  background-image: -moz-linear-gradient(center top, #F8F8F8, #ECECEC);
  background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#F8F8F8), to(#ECECEC), color-stop(.4, #F8F8F8));
  border-top: medium none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

table td,
table th {
  border-left: 1px solid #CCCCCC;
  border-top: 1px solid #CCCCCC;
  padding: 10px;
  text-align: left;
}

      Labels
      Labels
      Labels
      Labels
      Labels

      Value
      Value
      Value
      Value
      Value

JSFiddle

Answer 1

border-collapse: separate !important; a fonctionné.

Merci.

HTML

            Labels
            Labels
            Labels
            Labels
            Labels

            Value
            Value
            Value
            Value
            Value                            

CSS

table {
    border-collapse: separate !important;
    border-spacing: 0;
    width: 600px;
    margin: 30px;
}
.bordered {
    border: solid #ccc 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;
}
.bordered tr:hover {
    background: #ECECEC;    
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}
.bordered td, .bordered th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 10px;
    text-align: left;
}
.bordered th {
    background-color: #ECECEC;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#F8F8F8), to(#ECECEC));
    background-image: -webkit-linear-gradient(top, #F8F8F8, #ECECEC);
    background-image: -moz-linear-gradient(top, #F8F8F8, #ECECEC);    
    background-image: linear-gradient(top, #F8F8F8, #ECECEC);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    border-top: none;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.bordered td:first-child, .bordered th:first-child {
    border-left: none;
}
.bordered th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}
.bordered th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}
.bordered th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}
.bordered tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
}
.bordered tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
} 

jsFiddle

Answer 2

Cela fonctionne, il s'agit d'un problème avec l'outil utilisé : CSS normalisé par jsFiddle provoque le problème en cachant les paramètres par défaut des navigateurs...
Voir http://jsfiddle.net/XvdX9/5/

EDIT :
normalize.css ajoutée par jsFiddle ajoute l'instruction border-collapse: collapse à tous les tableaux et les rend complètement différents en CSS2.1 :

• Le modèle de bordures séparées
• Le modèle de bordures en cascade

Les différences entre les 2 modèles peuvent être observées dans ce autre fiddle : http://jsfiddle.net/XvdX9/11/ (avec des transparences sur les cellules et un énorme border-radius sur celle en haut à gauche, pour observer ce qui se passe sur le tableau par rapport à ses cellules)

Dans la même page CSS2.1 sur les tableaux HTML, il y a aussi des explications sur ce que les navigateurs devraient/pourraient faire avec les empty-cells dans le modèle de bordures séparées, la différence entre border-style: none et border-style: hidden dans le modèle de bordures en cascade, comment la largeur est calculée et quelle bordure devrait s'afficher si à la fois le tableau, la ligne et les cellules définissent 3 styles différents sur la même bordure.

Answer 3

Ceci est ma solution en utilisant l'enveloppe, juste en supprimant border-collapse might pas toujours être utile, car vous voudrez peut-être avoir des bordures.

.wrapper {
  overflow: auto;
  border-radius: 6px;
  border: 1px solid red;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
  border-style: hidden;

  width:100%;
  max-width: 100%;
}

th, td {
  padding: 10px;
  border: 1px solid #CCCCCC;
}

        Colonne 1
        Colonne 2
        Colonne 3

        Foo Bar boo
        Lipsum
        Beehuum Doh

        Dolor sit
        ahmad
        Polymorphisme

        Kerbalium
        Caton, gookame kyak
        Bière Premium Corona

Cet article a aidé : https://css-tricks.com/table-borders-inside/

Answer 4

Il suffit d'ajouter overflow:hidden au tableau avec border-radius.

.tablewithradius {
  overflow:hidden ;
  border-radius: 15px;
}

Answer 5

Une note à cette ancienne question:

Mon reset.css avait défini border-spacing: 0, ce qui entraînait la coupe des coins. J'ai dû le définir à 3px pour que mon rayon fonctionne correctement (la valeur dépendra du rayon en question).