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?


318

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.


2
Ne pourriez-vous pas envelopper le tableau dans un div, définir border-radius et "overflow: hidden" sur le div? Je viens de tester et cela fonctionne bien, sauf si vous avez besoin de faire défiler / étendre dans un div qui a une largeur / hauteur fixe ou ses parents qui le font.
Ian

Je pense que la dernière instruction CSS n'a pas de point-virgule.
JensG

3
Cette question a été posée en 2009. Je suis un peu surpris qu'en 2015 il n'y ait pas de meilleures solutions que celles listées ci-dessous. Le W3C aurait dû résoudre ce problème il y a quelques années.
Jonathan M

Réponses:


242

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.


75
Au lieu de faire le tour du HTML, pourquoi ne pas ajouter border-spacing: 0;un style de bordure?
Ramon Tayag

3
J'avais un problème pour définir la couleur d'arrière-plan de la balise TR au lieu de la balise TD. Assurez-vous que si vous rayez votre table, vous définissez la couleur d'arrière-plan du TD et non le TR.
Will Shaver

Eh bien, que se passe-t-il si vous devez utiliser la couleur de fond sur le TR? Est-ce possible du tout?
Mohoch

1
Ajouter simplement border-spacing: 0;comme Ramon recommande de le réparer pour moi. Assurez - vous que vous ajoutez la border-radiuset border-spacingstyles au <th>ou <td>éléments, non <thead>ou <tbody>.
Gavin

1
J'utilise bootstrap et j'ai trouvé la solution en suivant les conseils de Ramon, comme ceci:border-spacing: 0; border-collapse: separate;
Caner SAYGIN

84

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

5
C'est la seule chose qui a fonctionné pour moi. Il est cependant difficile d'obtenir la bonne couleur sur la bordure de la table.
Thomas Ahle

Il n'est pas utilisable si votre table a une couleur de fond différente de celle de la zone environnante.
g.pickardou

1
Merci pour votre code, il fonctionne également avec Firefox 26.0
maxivis

1
@ g.pickardou ce problème peut être traité en ajoutant 'overflow: hidden' sur l'élément de table.
Val

box-shadow agrandit la table et donc les côtés sont coupés maintenant.
Ray

63

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>


1
Veuillez écrire des réponses qui incluent un code (permanent). S'il y a beaucoup de code dans la réponse, postez simplement les bits pertinents et expliquez pourquoi ils sont pertinents.
Samuel Harmer

3
C'est une excellente solution, mais c'était un peu difficile à lire. J'ai réécrit certaines des règles de style et ajouté une explication du code, donc j'espère que cela aide.
Michael Martin-Smucker

appliquez également un rayon au tableau, sinon cela semble bizarre lorsque vous appliquez un arrière-plan au tableau lui-même.
chèvre

Qu'est-ce que la table.Infoclasse a à voir avec quoi que ce soit?
Pylinux

28

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


Merci, cela m'a permis de faire ce que je devais faire (ce qui impliquait une série d'éléments TH en haut à l'extérieur de la boîte `` coin arrondi '' contenant tous les TD ci-dessous)
RonLugge

12
Le problème border-spacing: 0est que vous ne pouvez pas avoir une bordure 1px, non? Parce que les bordures s'empilent au lieu de s'effondrer.
Michael Martin-Smucker

1
border-collapse: separate; border-spacing: 0; border-radius: 10px; overflow: hidden;a donné exactement ce dont j'avais besoin.
Milad.Nozari

23

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.


C'est quelque chose que j'ai également considéré, mais si je crée un div pour entourer la table et la définir pour avoir des coins arrondis, les coins carrés de la table saignent toujours. Voir l'exemple nouvellement publié.
vamin

Le meilleur compromis que j'ai pu trouver était d'ajouter un bloc THEAD à la table et de lui appliquer le fond gris (avec #eee sur la table elle-même). Les cellules d'en-tête ont débordé derrière la bordure de la table au lieu de celle-ci. Ensuite, j'ai augmenté la bordure de la table à 3 pixels pour masquer le débordement.
user59200

3
@vamin "saigner" - pas si vous utilisezoverflow:hidden;
Brian McCutchon

Donc, dans cette situation, tout le monde peut utiliser ma solution en bas de cette page b2n.ir/table-radius
AmerllicA

15

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.


Gardez à l'esprit, quiconque veut l'utiliser, qu'avec overflow: hiddenn'importe quel popover / info-bulle, il sera coupé par les dimensions du wrapper.
user776686

7

À 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 ajouté un exemple avec cellspacing = 0, et c'est beaucoup plus proche. Les bordures indésirables disparaissent, mais les coins inférieurs saignent toujours.
vamin

Merci encore pour votre aide. Les tableaux sont générés en php, donc je pense que s'il n'y a pas de solution élégante proposée, je vais simplement assigner une classe à chaque coin th / td et les styliser séparément.
vamin

6

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.


5

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

4

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.


Vous n'avez plus besoin de préfixes pour border-radius, attendez-vous à FF 3.6 (-moz). De plus, -khtml n'est certainement plus nécessaire.
Jonatan Littke

@JonatanLittke, vous pouvez toujours modifier la réponse si vous pensez qu'elle peut être améliorée. J'ai supprimé tous les préfixes et ajouté un lien vers caniuse.com afin que les gens puissent prendre leurs propres décisions concernant les préfixes border-radius.
Michael Martin-Smucker

4

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>

4

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">

Cela fonctionne, mais il vous faut ensuite utiliser les astuces firstchild / lastchild pour obtenir l'effet.
Thomas Ahle

4

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 !*/

3

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

il n'y a aucune raison de faire de cette réponse un wiki communautaire. Faire cela fait en sorte que vous n'obtiendrez aucune réputation de votre réponse.
tacaswell

3

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 :)


3

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.


Il s'agit d'une solution intelligente, mais elle "supprime" également la frontière réelle. Sur Chrome, la bordure droite et la bordure inférieure du tableau disparaissent et tous les coins arrondis n'ont pas de bordure.
Alex Jorgenson

3

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

2

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

2

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

2

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


0

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

Je suppose que vous ne l'avez peut-être pas compris, il essaie de le faire avec border-collapse: collapseactivé.
giovannipds

@giovannipds Jetez un oeil à sa propre réponse (réponse acceptée). Ma façon est juste une autre façon. Supprimez maintenant le "-1".
Diego Mello

Oh, je suis désolé, vous avez certainement raison, mon erreur, sa réponse acceptée semble dire exactement la même chose. Je devais m'en tenir à ce qui était écrit dans le titre de la question, il a souligné qu'il voulait un effondrement de la frontière, alors je suis allé droit au but. Je supprimerais le -1 si je le pouvais, mais je ne peux pas, vous devez modifier quelque chose dans la réponse pour me permettre cela. Essayez de mentionner quelque chose avec lequel cela n'est pas possible border-collapse: collapse. Pardonnez encore, j'attendrai votre mise à jour.
giovannipds

0

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>


-1

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.