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

                            ID
                            Titre
                            ID Parent
                            Action

                                1
                                Actualités
                                Catégorie Actualités
                                 Modifier  Supprimer

                                2
                                Produits
                                Produits Principaux
                                 Modifier  Supprimer

                                3
                                Blogs
                                Blogs Parent
                                 Modifier  Supprimer

Css

.custab{
    border: 1px solid #ccc;
    margin: 5% 0;
    transition: 0.5s;
    background-color: #fff;
    -webkit-border-radius:4px;
    border-radius: 4px;
    border-collapse: separate;
}

Answer 2

Vous n'avez pas besoin de vous inquiéter..Il suffit d'ajouter overflow: hidden; et ensuite d'appliquer le border radius. Le border radius sera appliqué à tous les quatre côtés.

Answer 3

Pour utiliser le border radius, j'ai un border radius de 20px dans le tableau, puis j'ai mis le border radius sur le premier enfant de l'en-tête du tableau (th) et le dernier enfant de l'en-tête du tableau.

table {
  border-collapse: collapse;
  border-radius:20px;
  padding: 10px;
}

table th:first-child {
  /* border-radius = coin supérieur gauche, coin supérieur droit, coin inférieur droit, coin inférieur gauche */
    border-radius: 20px 0 0 0; /* arrondi le coin supérieur gauche */
    padding-left: 15px;
}

table th:last-child {
    border-radius: 0 20px 0 0; /* arrondi le coin supérieur droit */
}

Cependant, cela ne fonctionnera pas si cela est fait avec les données du tableau (td) car cela ajoutera une courbe à chaque ligne du tableau. Ce n'est pas un problème si vous n'avez que 2 lignes dans votre tableau mais toute autre ajoutera des courbes aux lignes intérieures aussi. Vous ne voulez ces courbes que sur l'extérieur du tableau. Pour cela, ajoutez un id à votre dernière ligne. Ensuite, vous pouvez leur appliquer les courbes.

/* arrondi le premier élément de tableau dans la dernière ligne */

#lastRow td:first-child {
    border-radius: 0 0 0 20px; /* courbe inférieure gauche */
}

/* arrondi le dernier élément de tableau dans la dernière ligne */

#lastRow td:last-child {
    border-radius: 0 0 20px 0; /* courbe inférieure droite */
}

Answer 4

Il suffit d'ajouter ceci :

table {
   border-radius: 8px;
   border-collapse: separate;
}

Answer 5

Utilisez display: inline-block; ou display: block;. Le tableau utilise la propriété par défaut comme display: table; c'est pourquoi border-radius ne fonctionne pas comme prévu.

table {
   border-radius: 8px;
   display: inline-block;
}