Coins de table arrondis CSS uniquement

86

J'ai cherché et recherché, mais je n'ai pas été en mesure de trouver une solution à mon besoin.

J'ai une vieille table HTML. Je veux des coins arrondis pour cela, sans utiliser d'images ou de JS, c'est-à-dire uniquement du CSS pur . Comme ça:

Croquis de disposition de table

Coins arrondis pour les cellules d'angle et 1pxbordure épaisse pour les cellules.

Jusqu'à présent, j'ai ceci:

table {
  -moz-border-radius: 5px !important;
  border-collapse: collapse !important;
  border: none !important;
}
table th,
table td {
  border: none !important
}
table th:first-child {
  -moz-border-radius: 5px 0 0 0 !important;
}
table th:last-child {
  -moz-border-radius: 0 5px 0 0 !important;
}
table tr:last-child td:first-child {
  -moz-border-radius: 0 0 0 5px !important;
}
table tr:last-child td:last-child {
  -moz-border-radius: 0 0 5px 0 !important;
}
table tr:hover td {
  background-color: #ddd !important
}

Mais cela me laisse sans frontières pour les cellules. Si j'ajoute des bordures, elles ne sont pas arrondies!

Des solutions?

html css html-table rounded-corners Vishal Shah
la source
1
Avez-vous essayé d'ajouter une bordure aux éléments TD en utilisant moz-border-radius? Sachez également que cela ne fonctionnera pas dans IE, IE affichera toujours des bords droits.
Fermin le
En regardant les réponses et vos commentaires, vous ne savez pas ce que vous voulez: où voulez-vous des coins arrondis? tableau, cellules de tableau, seulement des cellules dans les coins de votre tableau?
BiAiB
3
Je suppose que c'est assez évident d'après le titre de la question, les coins de la table
Vishal Shah
@VishalShah +1 pour une question vraiment utile. J'utilisais aveuglément une classe de coins arrondis de l'interface utilisateur jQuery conçue pour les widgets de l'interface utilisateur, mais je l'ai appliquée aux éléments de tableau et tout est allé droit. Alors maintenant, je peux toujours utiliser mon thème d'interface utilisateur jQuery avec un widget basé sur une table.
DavidHyogo

Réponses:

90

Semble fonctionner correctement dans FF et Chrome (je n'ai testé aucun autre) avec des bordures séparées: http://jsfiddle.net/7veZQ/3/

Edit: Voici une implémentation relativement propre de votre croquis: 

table {
    border-collapse:separate;
    border:solid black 1px;
    border-radius:6px;
    -moz-border-radius:6px;
}

td, th {
    border-left:solid black 1px;
    border-top:solid black 1px;
}

th {
    background-color: blue;
    border-top: none;
}

td:first-child, th:first-child {
     border-left: none;
}
<table>
    <thead>
    <tr>
        <th>blah</th>
        <th>fwee</th>
        <th>spoon</th>
    </tr>
    </thead>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
</table>
Développer l'extrait

http://jsfiddle.net/MuZzz/3577/

RoToRa
la source
Pas exactement ce que je recherche. Si vous supprimez le rembourrage du tableau et appliquez un rayon de bordure aux cellules d'angle uniquement, vous obtenez des bordures épaisses de 2 pixels, ce qui est moche. N'ayez pas du tout de frontières.
Vishal Shah
3
Proche. Les cellules d'angle avaient également besoin d'un rayon de bordure. jsfiddle.net/JWb4T/1 Bien que maintenant vous voyez un léger écart entre le bord des cellules d'angle et le bord du tableau. Peut être corrigé en réduisant le rayon de bordure des cellules d'angle. Merci: D
Vishal Shah
Je suis heureux que tu l'aie résolu. Notez que first-childet last-childne fonctionne pas dans IE6 / 7/8, mais moins un problème pour vous puisque ni l'un ni l'autre border-radius. Cela signifie que vous ne pourrez pas utiliser CSS3Pie pour le réparer dans IE - cela corrigera le rayon de la bordure, mais pas le premier / dernier enfant.
Spudley
L'ajout border-collapse: separate;au modèle Zurb Ink a résolu le problème pour moi.
Johan Dettmar
1
peut-être que cela avait l'air bien il y a 7 ans, mais aujourd'hui, les frontières des cellules ne se connectent pas à l'aide de cette solution, donc cela semble horrible.
rtaft
23

Pour moi, la solution Twitter Bootstrap semble bonne. Cela exclut IE <9 (pas de coins arrondis dans IE 8 et inférieurs), mais c'est OK, je pense, si vous développez des Web-Apps potentielles.

CSS / HTML:

table { 
    border: 1px solid #ddd;
    border-collapse: separate;
    border-left: 0;
    border-radius: 4px;
    border-spacing: 0px;
}
thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
    border-collapse: separate;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
th, td {
    padding: 5px 4px 6px 4px; 
    text-align: left;
    vertical-align: top;
    border-left: 1px solid #ddd;    
}
td {
    border-top: 1px solid #ddd;    
}
thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
    border-radius: 4px 0 0 0;
}
thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
    border-radius: 0 0 0 4px;
}
<table>
  <thead>
    <tr><th>xxx</th><th>xxx</th><th>xxx</th></tr>
  </thead>
  <tbody>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
  </tbody>
</table>
Développer l'extrait

Vous pouvez jouer avec ça ici (sur jsFiddle)

Lars Schinkel
la source
17

Tout d'abord, vous aurez besoin de plus que -moz-border-radiussi vous souhaitez prendre en charge tous les navigateurs. Vous devez spécifier toutes les variantes, y compris simples border-radius, comme suit:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

Deuxièmement, pour répondre directement à votre question, border-radius n'affiche pas réellement de bordure; il définit simplement l'aspect des coins de la bordure, s'il y en a une.

Pour activer la bordure, et ainsi obtenir vos coins arrondis, vous avez également besoin de l' borderattribut sur vos éléments tdet th.

td, th {
   border:solid black 1px;
}

Vous verrez également les coins arrondis si vous avez une couleur d'arrière-plan (ou un graphique), bien que bien sûr, il faudrait une couleur d'arrière-plan différente de l'élément environnant pour que les coins arrondis soient visibles sans bordure.

Il est à noter que certains navigateurs plus anciens n'aiment pas mettre des border-radiustableaux / cellules de tableau. Cela peut valoir la peine de mettre un<div> à l'intérieur de chaque cellule et de le styliser à la place. Cependant, cela ne devrait affecter les versions actuelles d'aucun navigateur (sauf IE, qui ne prend pas du tout en charge les coins arrondis - voir ci-dessous)

Enfin, non pas que IE ne le supporte pas border-radiusdu tout (IE9 beta le fait, mais la plupart des utilisateurs d'IE seront sur IE8 ou moins). Si vous voulez pirater IE pour prendre en charge border-radius, regardez http://css3pie.com/

[ÉDITER]

D'accord, cela me dérangeait, alors j'ai fait des tests.

Voici un exemple de JSFiddle avec lequel j'ai joué

Il semble que l'élément critique qui vous manquait était border-collapse:separate;sur l'élément de table. Cela empêche les cellules de lier leurs bordures ensemble, ce qui leur permet de saisir le rayon de la bordure.

J'espère que ça t'as aidé.

Spudley
la source
Pour garder le code au minimum, j'ai laissé de côté les éléments multi-navigateurs. Si je donne une bordure à td et th, ils ne sont pas arrondis. J'ai des bords droits. Pourrait donner un exemple de code css pour une table sans css appliqué, ce qui démontrerait ce que vous dites.
Vishal Shah
@Vishal Shah - J'ai mis à jour ma réponse après avoir fait quelques tests. J'espère que ça t'as aidé.
Spudley
Votre exemple affiche un rayon de bordure pour TOUTES les cellules, alors que je le souhaite uniquement pour les cellules d'angle. C'est ce que je cherchais: jsfiddle.net/JWb4T/1
Vishal Shah
@Vishal Shah - J'ai compris que le problème était le manque d'arrondi n'importe où sur la table, plutôt que spécifiquement quels morceaux de la table devraient être arrondis. Heureux de l'avoir trié à la fin (il semble que le border-collapse:separate;conseil ait été utile à la fin)
Spudley
+1 pour ce border-collapse: astuce séparée. Cela m'a vraiment aidé.
DavidHyogo
12

La réponse choisie est terrible. Je mettrais en œuvre cela en ciblant les cellules du tableau d'angle et en appliquant le rayon de bordure correspondant.

Pour obtenir les coins supérieurs, définissez le rayon de bordure sur le premier et le dernier de type des èmes éléments, puis terminez en définissant le rayon de bordure sur le dernier et le premier de type td sur le dernier de type tr pour obtenir les coins inférieurs.

th:first-of-type {
  border-top-left-radius: 10px;
}
th:last-of-type {
  border-top-right-radius: 10px;
}
tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}
tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}
Luke Flournoy
la source
C'est tellement mieux que toutes les autres réponses ... C'est incroyablement simple et élégant!
Eric Cote
Heureux d'avoir pu aider!
Luke Flournoy
Cela fonctionne très bien, mais j'ai une autre table avec des théléments en haut et à gauche de la table et cela ne fonctionne pas pour cela. Comment arrondir les coins de ce type de table?
nenur
7

La meilleure solution que j'ai trouvée pour les coins arrondis et autres comportements CSS3 pour IE <9 peut être trouvée ici: http://css3pie.com/

Téléchargez le plug-in, copiez-le dans un répertoire de la structure de votre solution. Ensuite, dans votre feuille de style, assurez-vous d'avoir la balise de comportement afin qu'elle tire le plug-in.

Exemple simple de mon projet qui me donne des coins arrondis, un dégradé de couleur et une ombre de boîte pour ma table:

.table-canvas 
{
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    overflow:hidden;
    border-radius: 10px;
    -pie-background: linear-gradient(#ece9d8, #E5ECD8);   
    box-shadow: #666 0px 2px 3px;
    behavior: url(Include/PIE.htc);
    overflow: hidden;
}

Ne vous inquiétez pas si votre Intellisense CSS Visual Studio vous donne le soulignement vert pour les propriétés inconnues, cela fonctionne toujours lorsque vous l'exécutez. Certains éléments ne sont pas très clairement documentés, mais les exemples sont plutôt bons, surtout en première page.

Patrick Rodriguez
la source
6

Par expérience personnelle, j'ai découvert qu'il n'est pas possible d'arrondir les coins d'une cellule de tableau HTML avec du CSS pur. Arrondir la frontière la plus externe d'une table est possible.

Vous devrez recourir à l'utilisation d'images comme décrit dans ce tutoriel , ou tout autre similaire :)

Kyle
la source
1
+1, et même ici, ont récemment essayé d'y parvenir, mais pas de chance. Dû mettre à l'intérieur un <div>. ^^,
tomsseisums
4

C'est un peu approximatif, mais voici quelque chose que j'ai assemblé qui est entièrement composé de CSS et de HTML.

  • Coins extérieurs arrondis
  • Ligne d'en-tête
  • Plusieurs lignes de données

Cet exemple utilise également la :hoverpseudo-classe pour chaque cellule de données <td>. Les éléments peuvent être facilement mis à jour pour répondre à vos besoins et le survol peut être rapidement désactivé.

(Cependant, je n'ai pas encore réussi :hoverà faire fonctionner correctement les lignes complètes <tr>. La dernière ligne survolée ne s'affiche pas avec des coins arrondis en bas. Je suis sûr qu'il y a quelque chose de simple qui est négligé.)

table.dltrc {
  width: 95%;
  border-collapse: separate;
  border-spacing: 0px;
  border: solid black 2px;
  border-radius: 8px;
}

tr.dlheader {
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  padding: 2px
}

td.dlheader {
  background: #d9d9d9;
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  border-radius: 0px;
  padding: 2px
}

tr.dlinfo,
td.dlinfo {
  text-align: center;
  border-left: solid black 1px;
  border-top: solid black 1px;
  padding: 2px
}

td.dlinfo:first-child,
td.dlheader:first-child {
  border-left: none;
}

td.dlheader:first-child {
  border-radius: 5px 0 0 0;
}

td.dlheader:last-child {
  border-radius: 0 5px 0 0;
}


/*===== hover effects =====*/


/*tr.hover01:hover,
tr.hover02:hover {
  background-color: #dde6ee;
}*/


/* === ROW HOVER === */


/*tr.hover02:hover:last-child {
  background-color: #dde6ee;
  border-radius: 0 0 6px 6px;
  }*/


/* === CELL HOVER === */

td.hover01:hover {
  background-color: #dde6ee;
}

td.hover02:hover {
  background-color: #dde6ee;
}

td.hover02:first-child {
  border-radius: 0 0 0 6px;
}

td.hover02:last-child {
  border-radius: 0 0 6px 0;
}
<body style="background:white">
  <br>
  <center>
    <table class="dltrc" style="background:none">
      <tbody>
        <tr class="dlheader">
          <td class="dlheader">Subject</td>
          <td class="dlheader">Title</td>
          <td class="dlheader">Format</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">One</td>
          <td class="dlinfo hover01">Two</td>
          <td class="dlinfo hover01">Three</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Four</td>
          <td class="dlinfo hover01">Five</td>
          <td class="dlinfo hover01">Six</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Seven</td>
          <td class="dlinfo hover01">Eight</td>
          <td class="dlinfo hover01">Nine</td>
        </tr>
        <tr class="dlinfo2 hover02">
          <td class="dlinfo hover02">Ten</td>
          <td class="dlinfo hover01">Eleven</td>
          <td class="dlinfo hover02">Twelve</td>
        </tr>
      </tbody>
    </table>
  </center>
</body>
Développer l'extrait

K. Parker
la source
Cela devrait être la réponse approuvée. Merci!
incarné
1

Ajoutez un <div>wrapper autour de la table et appliquez le CSS suivant

border-radius: x px;
overflow: hidden;
display: inline-block;

à cet emballage.

Ubby
la source
1

Pour adapter la réponse brillante de @luke flournoy - et si vous n'utilisez pas thdans votre tableau, voici tout le CSS dont vous avez besoin pour créer un tableau arrondi:

.my_table{
border-collapse: separate;
border-spacing: 0;
border: 1px solid grey;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

.my_table tr:first-of-type {
  border-top-left-radius: 10px;
}

.my_table tr:first-of-type td:last-of-type {
  border-top-right-radius: 10px;
}

.my_table tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}

.my_table tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}
freeworlder
la source
0

Pour un tableau encadré et déroulant, utilisez ceci (remplacer 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>
brauliobo
la source
0

Vous pouvez essayer ceci si vous voulez les coins arrondis de chaque côté de la table sans toucher les cellules: http://jsfiddle.net/7veZQ/3983/

<table>
    <tr class="first-line"><td>A</td><td>B</td></tr>
    <tr class="last-line"><td>C</td><td>D</td></tr>
</table>
Younes Hadry
la source
0

Exemple de HTML

<table class="round-corner" aria-describedby="caption">
    <caption id="caption">Table with rounded corners</caption>
    <thead>
        <tr>
            <th scope="col">Head1</th>
            <th scope="col">Head2</th>
            <th scope="col">Head3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
        </tr>
    </tfoot>
</table>

SCSS, facilement converti en CSS, utilisez sassmeister.com

// General CSS
table,
th,
td {
    border: 1px solid #000;
    padding: 8px 12px;
}

.round-corner {
    border-collapse: collapse;
    border-style: hidden;
    box-shadow: 0 0 0 1px #000; // fake "border"
    border-radius: 4px;

    // Maybe there's no THEAD after the caption?
    caption + tbody {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:first-child {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:last-child {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    thead {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tfoot {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    // Reset tables inside table
    table tr th,
    table tr td {
        border-radius: 0;
    }
}

http://jsfiddle.net/MuTLY/xqrgo466/

Leandro Barbosa
la source
0

Ce qui suit est quelque chose que j'ai utilisé et qui a fonctionné pour moi sur tous les navigateurs, j'espère donc que cela aidera quelqu'un à l'avenir:

#contentblock th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 6px 0 0 0;
}

#contentblock th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 6px 0 0;
}
#contentblock tr:last-child td:last-child {
     border-radius: 0 0 6px 0;
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 6px 0;
 }

#contentblock 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;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 0 6px;
}

Évidemment, la #contentblockpartie peut être remplacée / modifiée au besoin et vous pouvez trouver le border-radius.htcfichier en effectuant une recherche dans Google ou votre navigateur Web préféré.

Ansipants
la source
0

C'est css3, seul un navigateur récent non-IE <9 le supportera.

Vérifiez ici , il dérive la propriété round pour tous les navigateurs disponibles

BiAiB
la source
4
css3please ne fait rien pour border-radius dans IE. Si vous voulez pirater IE pour prendre en charge border-radius, regardez css3pie.com
Spudley
Je parle de la propriété arrondie pour une table en particulier, pas de tout autre élément.
Vishal Shah
0

Ajouter entre les <head>balises:

<style>
  td {background: #ffddaa; width: 20%;}
</style>

et dans le corps:

<div style="background: black; border-radius: 12px;">
  <table width="100%" style="cell-spacing: 1px;">
    <tr>
      <td style="border-top-left-radius: 10px;">
        Noordwest
      </td>
      <td>&nbsp;</td>
      <td>Noord</td>
      <td>&nbsp;</td>
      <td style="border-top-right-radius: 10px;">
        Noordoost
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>West</td>
      <td>&nbsp;</td>
      <td>Centrum</td>
      <td>&nbsp;</td>
      <td>Oost</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td style="border-bottom-left-radius: 10px;">
        Zuidwest
      </td>
      <td>&nbsp;</td>
      <td>Zuid</td>
      <td>&nbsp;</td>
      <td style="border-bottom-right-radius: 10px;">
        Zuidoost
      </td>
    </tr>
  </table>
</div>

La couleur, le contenu et la mise en forme des cellules sont bien sûr par exemple;
il s'agit d'espacer les cellules remplies de couleur dans un div. Ce faisant, les bordures de cellule / bordure de tableau noires sont en fait la couleur d'arrière-plan div.
Notez que vous devrez définir le div-border-radius environ 2 valeurs supérieures aux rayons de bordure des coins de cellule séparés, pour obtenir un effet de coin arrondi lisse.

Paul Schuddebeurs
la source
0

Leçon sur les bordures de tableau ...

REMARQUE: Le code HTML / CSS ci-dessous ne doit être affiché que dans IE. Le code ne sera pas rendu correctement dans Chrome!

Nous devons nous rappeler que:

  1. Une table a une bordure: sa limite extérieure (qui peut également avoir un rayon de bordure.)

  2. Les cellules elles-mêmes ont ÉGALEMENT des bordures (qui peuvent aussi avoir un rayon de bordure.)

  3. Les bordures du tableau et des cellules peuvent interférer les unes avec les autres:

    La bordure de la cellule peut percer la bordure du tableau (c'est-à-dire: la limite du tableau).

    Pour voir cet effet, modifiez les règles de style CSS dans le code ci-dessous comme suit:
    i. table {border-collapse: séparé;}
    ii. Supprimez les règles de style qui entourent les cellules d'angle du tableau.
    iii. Jouez ensuite avec l'espacement des bordures pour voir l'interférence.

  4. Cependant, la bordure du tableau et les bordures de cellule peuvent être COLLAPSED (en utilisant: border-collapse: collapse;).

  5. Lorsqu'elles sont réduites, les bordures de cellule et de tableau interfèrent d'une manière différente:

    je. Si la bordure du tableau est arrondie mais que les bordures de cellule restent carrées, la forme de la cellule est prioritaire et le tableau perd ses coins incurvés.

    ii. Inversement, si les cellules d'angle sont courbes mais que la limite du tableau est carrée, vous verrez alors un coin carré laid bordant la courbure des cellules d'angle.

  6. Étant donné que l'attribut de la cellule est prioritaire, la manière d'arrondir les quatre coins de la table est alors:

    je. Réduire les bordures du tableau (en utilisant: border-collapse: collapse;).

    ii. Définition de la courbure souhaitée sur les cellules d'angle du tableau.
    iii. Peu importe si les coins de la table sont arrondis (c'est-à-dire: son rayon de bordure peut être nul). 

			.zui-table-rounded {
				border: 2px solid blue;
				/*border-radius: 20px;*/
				
				border-collapse: collapse;
				border-spacing: 0px;
			}
						
			.zui-table-rounded thead th:first-child {
				border-radius: 30px 0 0 0;
			}
			
			.zui-table-rounded thead th:last-child {
				border-radius: 0 10px 0 0;
			}
			
			.zui-table-rounded tbody tr:last-child td:first-child {
				border-radius: 0 0 0 10px;
			}
			
			.zui-table-rounded tbody tr:last-child td:last-child {
				border-radius: 0 0 10px 0;
			}
			
			
			.zui-table-rounded thead th {
				background-color: #CFAD70;
			}
			
			.zui-table-rounded tbody td {
				border-top: solid 1px #957030;
				background-color: #EED592;
			}
			<table class="zui-table-rounded">
			<thead>
				<tr>
					<th>Name</th>
					<th>Position</th>
					<th>Height</th>
					<th>Born</th>
					<th>Salary</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>DeMarcus Cousins</td>
					<td>C</td>
					<td>6'11"</td>
					<td>08-13-1990</td>
					<td>$4,917,000</td>
				</tr>
				<tr>
					<td>Isaiah Thomas</td>
					<td>PG</td>
					<td>5'9"</td>
					<td>02-07-1989</td>
					<td>$473,604</td>
				</tr>
				<tr>
					<td>Ben McLemore</td>
					<td>SG</td>
					<td>6'5"</td>
					<td>02-11-1993</td>
					<td>$2,895,960</td>
				</tr>
				<tr>
					<td>Marcus Thornton</td>
					<td>SG</td>
					<td>6'4"</td>
					<td>05-05-1987</td>
					<td>$7,000,000</td>
				</tr>
				<tr>
					<td>Jason Thompson</td>
					<td>PF</td>
					<td>6'11"</td>
					<td>06-21-1986</td>
					<td>$3,001,000</td>
				</tr>
			</tbody>
		</table>
Développer l'extrait

IqbalHamid
la source
-1

CSS:

table {
  border: 1px solid black;
  border-radius: 10px;
  border-collapse: collapse;
  overflow: hidden;
}

td {
  padding: 0.5em 1em;
  border: 1px solid black;
}
Goran Vasic
la source
Veuillez préciser votre solution
Srivats Shankar
@SrivatsShankar J'ai écrit cela il y a longtemps, donc à en juger par ce -1, je suppose que cela ne fonctionne plus. Mon point était d'ajouter "border-radius" à la <table>, puis "overflow: hidden" masquerait les bordures extérieures de <td>. Je suppose que vous pouvez essayer d'ajouter "border-radius", "border" et "overflow: hidden" à <div> qui est un wrapper pour <table>, puis ajouter des bordures à l'intérieur de chaque <td> (je ferait le premier et le dernier élément de chaque ligne / colonne sans la bordure extérieure, car <div> aura une bordure arrondie, tout comme sur l'image)
Goran Vasic
C'est suffisant. Ça a du sens. Il ne donne pas le résultat exact demandé, mais je comprends votre point de vue. Si vous pouviez modifier votre réponse, je peux modifier mon score. :-)
Srivats Shankar