28172 sujets
CSS et mise en forme, CSS3
Edit: Essaie cela
Modifié par jmlapam (05 Jul 2012 - 21:33)
table tr:last-child td:first-child {
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
border-bottom-left-radius:10px
}
table tr:last-child td:last-child {
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-right-radius:10px
}
Modifié par jmlapam (05 Jul 2012 - 21:33)
Alors quelques précisions peut être
Lorsque j'applique le border-radius à l'ensemble du tableau, tout se passe correctement.
Seulement, ma première ligne (que je la mette en tr td ou thead) a une couleur de fond (background-color)
Du coup, cette couleur de fond casse l'arrondi haut et me met des coins carrés en haut.
Je cherche donc à appliquer un border-radius soit à la première ligne, soit aux deux cellules gauche et droite de la première ligne.
Dans tous les cas, seul FF ne prend pas en compte alors que pour le bas, aucun souci.
J'ai bien sur essayé avec border-radius et -moz-border-radius...
Encore merci à ceux qui se penchent sur mon problème
Lorsque j'applique le border-radius à l'ensemble du tableau, tout se passe correctement.
Seulement, ma première ligne (que je la mette en tr td ou thead) a une couleur de fond (background-color)
Du coup, cette couleur de fond casse l'arrondi haut et me met des coins carrés en haut.
Je cherche donc à appliquer un border-radius soit à la première ligne, soit aux deux cellules gauche et droite de la première ligne.
Dans tous les cas, seul FF ne prend pas en compte alors que pour le bas, aucun souci.
J'ai bien sur essayé avec border-radius et -moz-border-radius...
Encore merci à ceux qui se penchent sur mon problème
Oui oui, bien sur
Sauf que j'ai utilisé des tr:first-child car c'est la ligne du haut (celle qui est de couleur différente) qui me pose probleme
Sur une page de test, en dehors de mon projet, j'ai réussi à obtenir le résultat voulu:
J'ai appliqué les couleurs de fond aux td et non pas au tr
Ce code fonctionne donc:
Je vais donc introduire cette technique dans mon projet
Conclusion: Ne pas appliquer de background-color sur une ligne entière
Merci pour ton aide
Sauf que j'ai utilisé des tr:first-child car c'est la ligne du haut (celle qui est de couleur différente) qui me pose probleme
Sur une page de test, en dehors de mon projet, j'ai réussi à obtenir le résultat voulu:
J'ai appliqué les couleurs de fond aux td et non pas au tr
Ce code fonctionne donc:
td {
background-color:#00F;
padding: 0.5em;
}
tr:first-child td { background-color: #F00;}
tr:first-child td:first-child { border-radius: 8px 0 0 0; }
tr:first-child td:last-child { border-radius: 0 8px 0 0; }
tr:last-child td:first-child { border-radius: 0 0 0 8px; }
tr:last-child td:last-child { border-radius: 0 0 8px 0;}
Je vais donc introduire cette technique dans mon projet
Conclusion: Ne pas appliquer de background-color sur une ligne entière
Merci pour ton aide