Coins de table arrondis CSS uniquement

Question

J'ai cherché et cherché, mais je n'ai pas trouvé de solution à mon problème.

J'ai un simple tableau HTML. Je veux des coins arrondis, sans à l'aide d'images ou de JS, c'est-à-dire purement CSS uniquement . Comme ceci :

Coins arrondis pour les cellules d'angle, et 1px une bordure é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 je n'ai pas de bordures pour les cellules. Si j'ajoute des bordures, elles ne sont pas arrondies !

Des solutions ?

Answer 1

Il semble fonctionner correctement dans FF et Chrome (je n'ai pas testé les autres) 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;
}

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>

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

Answer 2

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

Pour obtenir les coins supérieurs, définissez le rayon de la bordure sur le premier et le dernier type de l'élément th puis terminez en définissant le rayon de la bordure sur le dernier et le premier des éléments td sur le dernier du 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;
}

Answer 3

Pour moi, le Solution Twitter Bootstrap a l'air bien. Il exclut IE < 9 (pas de coins arrondis dans IE 8 et inférieur), mais cela ne pose pas de problème, je pense, si vous développez des applications Web prospectives.

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>

Vous pouvez jouer avec cela ici (sur jsFiddle)

Answer 4

Tout d'abord, vous aurez besoin de plus que de simples -moz-border-radius si vous souhaitez prendre en charge tous les navigateurs. Vous devez spécifier toutes les variantes, y compris les 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 ; elle définit simplement l'aspect des coins de la bordure, s'il y en a une.

Pour activer la bordure et obtenir ainsi des coins arrondis, vous avez également besoin de la fonction border sur votre td y th éléments.

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 qu'il faille évidemment que la couleur d'arrière-plan soit différente de celle de l'élément qui l'entoure pour que les coins arrondis soient visibles sans bordure.

Il convient de noter que certains navigateurs plus anciens n'apprécient pas l'insertion de border-radius sur les tableaux/cellules de tableau. Il peut être utile de mettre un <div> à l'intérieur de chaque cellule et la styliser à la place. Cependant, cela ne devrait pas affecter les versions actuelles des navigateurs (à l'exception d'IE, qui ne supporte pas du tout les coins arrondis - voir ci-dessous).

Enfin, ce n'est pas parce qu'IE ne prend pas en charge border-radius (IE9 beta le fait, mais la plupart des utilisateurs d'IE seront sur IE8 ou moins). Si vous voulez pirater IE pour qu'il prenne en charge le border-radius, consultez le site suivant http://css3pie.com/

[EDIT]

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

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

Il semble que la chose essentielle qui vous manquait était border-collapse:separate; sur l'élément tableau. Cela empêche les cellules de lier leurs bordures entre elles, ce qui leur permet de prendre le rayon de la bordure.

J'espère que cela vous aidera.

Answer 5

La meilleure solution que j'ai trouvée pour les coins arrondis et d'autres comportements CSS3 pour IE<9 se trouve 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 de sorte qu'elle tire le plug-in.

Exemple simple de mon projet qui me donne des coins arrondis, un dégradé de couleurs 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 l'intellisense CSS de Visual Studio vous donne un soulignement vert pour les propriétés inconnues, cela fonctionne quand même quand vous l'exécutez. Certains éléments ne sont pas très clairement documentés, mais les exemples sont assez bons, en particulier sur la page d'accueil.