28111 sujets

CSS et mise en forme, CSS3

"Border-radius" pour un tableau

Bonjour,

Juste une petite question : je viens de découvrir la propriété "border-radius" et je voulais savoir s'il était possible de l'utiliser pour un tableau, autrement dit est-ce possible d'arrondir les coins extérieurs du tableau avec cette propriété, car j'ai tourné le truc dans tous les sens, je n'y arrive pas. Smiley decu

La fonction marche bien avec d'autres balises, pas de problème.
Pour info je suis sous Chrome.

En fait j'aurais une 2ème question Smiley langue : j'utilise "Notepad++" et je remarque que la propriété "border-radius" ne semble pas être reconnue comme une propriété CSS (voir ci-dessous) même si ensuite tout fonctionne... est-ce que cela vient de Notepad++ ?

[code=css]
.radius_tr
{
       border: 1px solid #89a; 
       
       border-radius: 10px 10px 0 0; 
       text-decoration: none; 
}


Merci beaucoup par avance ! Smiley cligne
Administrateur
Bonjour,

Je te conseille de l'appliquer aux cellules (td et th), parce que soit ça ne fonctionne pas sur tr et table/thead/tfoot/tbody (me rappelle plus, juste que j'avais des bugs inattendus avec mes premiers tests), soit ça va entrer en conflit avec la couleur de fond des cellules (s'il y en a).
Dans le dernier cas, tu aurais des coins carrés (cellule) avec en-dessous l'arrondi de la table, c'est fun mais pas désiré Smiley smile

Tu peux cibler :
thead tr:first-child th:first-child
thead tr:first-child th:last-child
tbody tr:last-child th:first-child
tbody tr:last-child th:last-child
(en l'absence de tfoot)
en arrondissant à chaque fois l'un des coins de la cellule qui fait le coin
Merci Felipe,

En fait même si je crois avoir compris l'esprit de ton idée, je suis pas trop calé encore et j'ai pas compris le
"Tu peux cibler :
thead tr:first-child th:first-child
thead tr:first-child th:last-child
tbody tr:last-child th:first-child
tbody tr:last-child th:last-child
(en l'absence de tfoot)"

Smiley confused

J'ai fait ça mais ça marche pas non plus : Smiley decu

HTML:

...
<tr>
   <td id="coin_inf_gauche">cellule gauche</td>
   <td>cellule milieu</td>
   <td>cellule droite</td>
</tr>
...


CSS:

#coin_inf_gauche
{
  border: 2px solid black;
  border-radius: 0 0 0 10px; 
  text-decoration: none; 
}


Pas gagné tout ça ! Smiley smile
Administrateur
Ah euh tu as regardé l'article sur border-radius ? Avec le préfixe -webkit pour le navigateur que tu utilises, ça devrait mieux fonctionner ... et j'aurais pu penser à te le dire avant Smiley confused
oui j'avais vu l'histoire du préfixe et fait des tests mais en vain.
En fait qd on ne parle pas de tableau, le "border-radius" 'tout court' semble suffire car ça marche chez moi, par contre au niveau "tableau" j'ai tourné le truc dans tous les sens :
avec et sans "-webkit", avec ou sans "border-radius" simple etc....mais rien ne marche Smiley decu

exemple :

#coin_inf_gauche
{
  border: 2px solid black;
  -webkit-border-radius: 0 0 0 10px; 
  border-radius: 0 0 0 10px; 
  text-decoration: none; 
}
Je viens de tester ce bout de code sur Firefox est ca fonctionne très bien, peut-être une spécificité Chrome.

<style>
table {
  border: 2px solid red;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
}
</style>

<table>
  <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
  </tr>
  <tr>
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>

Modifié par RACBasket (26 Oct 2010 - 14:50)
Merci RACBasket !
Ton exemple marche chez moi aussi mais en fait c'est pas exactement ce que je souhaite!
Je sais je suis assez compliqué ! Smiley langue

En fait l'idéal, ça serait d'avoir les cellules à l'intérieur avec une bordure et ensuite "collapsées" ! Smiley cligne

J'ai repris ton exemple et je l'ai complété mais dès que j'ajoute le collapse, la bordure des cellules prend la priorité sur mon"border-radius de la table... Smiley decu ..en même temps ça semble logique...


<style> 
table { 
  border: 2px solid red; 
  border-radius: 0 0 0 8px; 
  -moz-border-radius: 8px; 
  -webkit-border-radius: 0 0 0 8px; 
  border-collapse: collapse;
} 

td
{
  border: 2px solid red; 
 
}
</style>


Si tu enlèves le "border-collapse" , j'arrive à ce que je souhaite au détail près que mes cellules sont toutes bordées les unes indépendamment des autres donc pas top et assez moche...
J'ai l'impression qu'il n'y a guère de solutions!

J'offre donc 500 000€ au premier qui me la trouve ! Smiley langue
Modifié par Claw69 (26 Oct 2010 - 16:00)
Je déterre tout de même le sujet, car j'ai fini par trouver la solution, très simple en définitive : pas de border-collapse (laisser en separate), mais ajouter border-spacing:0;

Pour les 500 000€, ça tient toujours ??? Smiley cligne
Sujet clos
Aller à