Propriété border-radius et border-collapse de CSS3: l'effondrement ne se mélange pas. Comment puis-je utiliser border-radius pour créer une table réduite avec des coins arrondis?

Edit - Titre: Y at - il une autre façon d'atteindre border-collapse:collapseen 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-radiusproprié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:collapsepropriété, et lorsque cela est défini border-radiusne fonctionne plus. Existe-t-il un moyen basé sur CSS pour obtenir le même effet que border-collapse:collapsesans 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 tdarrondir 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 tdcoins 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:

1. c'est un site très léger, et je voudrais garder JavaScript au minimum
2. 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.

Je l'ai compris. Il vous suffit d'utiliser des sélecteurs spéciaux.

Le problème avec l'arrondi des coins de la table était que les éléments td ne devenaient pas également arrondis. Vous pouvez résoudre cela 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 tourne correctement, sauf qu'il y a toujours le problème de border-collapse: collapsetout casser.

Une solution de contournement consiste à ajouterborder-spacing: 0 et à laisser la valeur par défaut border-collapse: separatesur la table.

La méthode suivante fonctionne (testée dans Chrome) en utilisant un box-shadowavec une propagation de 1pxau lieu d'une "vraie" bordure.

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 CSS uniquement (pas besoin de définir cellspacing=0dans le HTML) qui autorise des bordures 1px (ce que vous ne pouvez pas faire avec la border-spacing: 0solution), je préfère faire ce qui suit:

• Définissez un border-rightet border-bottompour vos cellules de tableau ( tdet th)
• Donner les cellules de la première rangée d' uneborder-top
• Donner les cellules dans la première colonne d' uneborder-left
• À l'aide des sélecteurs first-childet last-child, arrondissez les coins appropriés pour les cellules du tableau aux quatre coins.

Voir une démo ici.

Étant donné le 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;
    }
         

<div class="custom-table">
    <table>
        <tr>
            <th>item1</th>
            <th>item2</th>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
    </table>
</div>

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

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

Le projet de travail spécifie que border-radiuscela ne s'applique pas aux éléments du tableau lorsque la valeur de border-collapseest collapse.

Comme Ian l'a dit, la solution consiste à imbriquer la table à l'intérieur d'un div et à la définir comme ça:

.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 ceci:

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

Et puis pour obtenir la bordure en bas et à droite en arrière

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

:last-childn'est pas valide dans ie6, mais si vous utilisez, border-radiusje suppose que vous ne vous en souciez pas.

ÉDITER:

Après avoir regardé votre exemple de page, il semble que vous puissiez peut-être contourner ce problème avec l'espacement des cellules et le remplissage.

Les épaisses bordures grises 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 l'espacement des cellules sur zéro (ou de manière équivalente:), td, th { margin:0; }les "bordures" grises disparaîtront.

EDIT 2:

Je ne peux pas trouver un moyen de le faire avec une seule table. Si vous changez votre ligne d'en-tête en une table imbriquée, vous pourrez peut-être obtenir l'effet que vous souhaitez, mais ce sera plus de travail et non dynamique.

J'ai essayé une solution de contournement en utilisant les pseudo-éléments :beforeet :aftersur le thead th:first-childetthead th:last-child

En combinaison avec l'emballage de la table avec un <div class="radius borderCCC">

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.

En fait, vous pouvez ajouter votre tableintérieur divcomme enveloppe. puis attribuez ces CSScodes au wrapper:

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

table {
  border-collapse: collapse;
}

Les réponses données ne fonctionnent que lorsqu'il n'y a pas de frontières autour de la table, ce qui est très limitant!

J'ai une macro dans SASS pour ce faire, qui prend entièrement en charge externe les bordures et internes, réalisant le même style que border-collapse: collapse 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 gracieusement) car IE8 ne prend pas en charge border-radius :(

Certains navigateurs plus anciens peuvent nécessiter des préfixes de fournisseur pour fonctionner avecborder-radius , donc ne hésitez pas à ajouter les préfixes à votre code si nécessaire.

Cette réponse n'est pas la plus courte - mais elle 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

<table>

avec la balise suivante:

<table class="roundedTable">

et assurez-vous d'inclure les styles CSS ci-dessus dans votre code HTML.

J'espère que cela t'aides.

Pour un tableau bordé et déroulant, utilisez-le (remplacez les variables, les $textes de départ)

Si vous utilisez thead, tfootou th, remplacez simplement tr:first-childet tr-last-childet tdavec 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:

<div id=table-wrap>
  <table>
    <tr>
       <td>1</td>
       <td>2</td>
    </tr>
    <tr>
       <td>3</td>
       <td>4</td>
    </tr>
  </table>
</div>

J'ai eu le même problème. supprimer border-collapseentièrement et utiliser: cellspacing="0" cellpadding="0" dans le document html. exemple:

<table class="top_container" align="center" cellspacing="0" cellpadding="0">

Je viens d'écrire un ensemble fou de CSS 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éparé pour la table et l'affichage: table en ligne pour le corps et la tête.

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 également 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
}

J'essaye, devine 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 au débordement de la table: caché

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é initialement posée, mais cela fonctionne maintenant.

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

La clé est d'utiliser border-spacing: 0comme il le souligne.

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

J'ai commencé à expérimenter avec « affichage » et je trouve que: border-radius, border, margin, padding, en tablesont 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 nous devons définir un widthde 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 de http://medialoot.com/preview/css-ui-kit/demo.html . Il est basé sur les sélecteurs spéciaux suggérés par Joel Potter ci-dessus. Comme vous pouvez le voir, il inclut également de la magie pour rendre IE un peu heureux. Il comprend quelques 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;
}

Voici un moyen:

div {
  ...
  overflow: hidden;
  border-radius: 14px;
  transform: rotate(0deg);
}
table {
  border-spacing: 0;
}

<div>
  <table></table>
</div>

Ou

    div {
      ...
      overflow: hidden;
      border-radius: 14px;
      position: relative;
      z-index: 1;
    }

Je fais toujours ç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;
    }
  }
}

Jusqu'à présent, la meilleure solution vient de votre propre solution et elle se présente comme suit:

table, tr, td, th{
  border: 1px solid; 
  text-align: center;
}

table{
	border-spacing: 0;
  width: 100%;
  display: table;
}

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

table tr:last-child td:last-child, tr:last-child, table {
    border-bottom-right-radius: 25px;
}


table tr:first-child th:first-child, tr:first-child, table {
    border-top-left-radius: 25px;
}

table tr:first-child th:last-child, tr:first-child, table {
    border-top-right-radius: 25px;
}

<table>
  <tr>
    <th>Num</th><th>Lett</th><th>Lat</th>
  </tr>
  <tr>
    <td>1</td><td>A</td><td>I</td>
  </tr>
  <tr>
    <td>2</td><td>B</td><td>II</td>
  </tr>
  <tr>
    <td>3</td><td>C</td><td>III</td>
  </tr>
</table>

Border-radius est désormais 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 rangées supérieure et inférieure que votre bordure. Avec les 3 couleurs identiques, il se fond et ressemble à une table parfaitement arrondie même si ce n'est pas physiquement.