CSS et bords arrondies sur un tableau !!!

Bonsoir,

Je m'essaye à faire un joli tableau avec des coins arrondis et à ma grande surprise mon CSS fonctionne très bien sur IE9 mais ne fonctionne pas du tout sur Chrome et Firefox (les dernières version bien sûr).

Je vous met le code ci-dessous, si quelqu'un pouvait m'aider, ça serais cool. J'ai bien sûr essayé plein de choses mais je n'y arrive pas.

table {
	font-size: .8em;
	margin: 0 auto;
	width: 96%;
	background-color: #A41F1F;
	border-collapse: collapse;
	border-radius: 14px;
}

table > tr:first-child > td:first-child {
	border-top-left-radius: 14px;
}

table > tr:first-child > td:last-child {
	border-top-right-radius: 14px;
}

table > tr:last-child td:first-child {
	border-bottom-left-radius: 14px;
}

table > tr:last-child td:last-child {
	border-bottom-right-radius: 14px;
}

Merci pour votre aide.

PS : pour info ce sont les last et first-child (successifs) qu'ils n'acceptent pas !

PS2 : j'ai aussi essayé d'autres choses que les child 'avant'... Mais pas trouvé
Modifié par MagicCarpet (08 Nov 2012 - 19:51)

bonsoir,

c'est juste une incompatibilité entre deux regle CSS qui se contourne simplement : http://yidille.free.fr/plux/valign/?53-border-collapse-et-border-radius

++

gc-nomade a écrit :
bonsoir,

c'est juste une incompatibilité entre deux regle CSS qui se contourne simplement : http://yidille.free.fr/plux/valign/?53-border-collapse-et-border-radius

++

Merci mais est-ce que tu es sûr de ton lien ?
J'ai une erreur 500... A moins que tu peux me dire comment le contourner ?

insiste, free est mutualisé et gratuit , a certaine heures , l'affluence genere des couac

Oui, effectivement je viens d'avoir la page.
Par contre, je remet mon code parce que ça ne fonctionne toujours pas...

table {
	font-size: .8em;
	margin: 0 auto;
	width: 96%;
	background-color: #A41F1F;
	border-collapse: separate;
	border-spacing: 0px;
	border-radius: 14px;
}

table > tr:first-child > td:first-child {
	border-top-left-radius: 14px;
}

table > tr:first-child > td:last-child {
	border-top-right-radius: 14px;
}

table > tr:last-child > td:first-child {
	border-bottom-left-radius: 14px;
}

table > tr:last-child > td:last-child {
	border-bottom-right-radius: 14px;
}

Est-ce que tu es bien d'accord avec ça ?
J'aurais jamais trouvé sinon...

PS : je précise que mon <table> est bien arrondi, sur tous les navigateurs... C'est la première ligne et dernière qui ne le sont pas sous les autres que IE (td). Enfin là je parle de ma bordure... Ci-dessous :

td {
	padding: 1px;
	border-top: solid 1px #5D1212;
	border-bottom: solid 1px #5D1212;
}

td:first-child {
	border-left: solid 1px #5D1212;
}

td:last-child {
	border-right: solid 1px #5D1212;
}

C'est cette bordure qui reste à angle droit sur Google et Firefox (pas testé Safari) mais est bien arrondi sous IE.

Une image vaut mieux qu'un long discour, voilà se que j'obtiens sous IE (et que j'aimerais avoir sous les autres) :



Et se que j'ai sous Chrome/Firefox :



On voit bien mon <table> arrondie mais pas la bordure.
Modifié par MagicCarpet (04 Nov 2012 - 21:18)

Salut,

Perso, pas le moindre problème avec ta CSS.
Ni sous chrome, safari ou firefox...

tm

tm™ a écrit :
Salut,

Perso, pas le moindre problème avec ta CSS.
Ni sous chrome, safari ou firefox...

tm

Oui mais je viens de mettre des précisions car j'était pas assez précis je pense
(vois captures d'écrans).

tm™ a écrit :
Salut,

Perso, pas le moindre problème avec ta CSS.
Ni sous chrome, safari ou firefox...

tm

Curieux, je suis en train d'essayer mon code avec ton lien mais sur IE, ça marche pas

re,

c'est ta façon de distribuer tes bordures aux éléments.

Simplifie

table {
	font-size: .8em;
	margin: 0 auto;
	width: 96%;
	background-color: #A41F1F;
	border-collapse: separate;
	border-spacing: 0px;
	border-radius: 14px;
	border:solid 1px;
}

table  tr:first-child td {
	border-top:none;
}
table tr:last-child td {
	border-bottom:none;
}
td {
	padding: 5px;
	border-top: solid 1px #5D1212;
	border-bottom: solid 1px #5D1212;
}

Comme ceci ?

tm

tm™ a écrit :
Comme ceci ?

tm

Oui super mais j'ai un dernier problème, désolé je ne le fais pas exprès
Le rendu sur le tableau est ok, par contre j'ai un rollover (géré par jQuery si je ne dis pas de bétises, ça fais un moment que j'ai pas touché cette page) et quand je suis sur la première ou dernière ligne, la couleur de fond deviens plus rouge mais du coup les bords ressortent et sont rectangulaire. Avant ils étaient arrondie, comme le tableau sous IE mais depuis les changements, le tableau est ok mais plus le rollover... Vous me suivez ?

Edit : oui c'est bien un jQuery qui fais un addClass et removeClass, voici le code CSS appliqué :

.hover {
	background-color: #5D1212 !important;
}

Modifié par MagicCarpet (04 Nov 2012 - 21:43)

Re,

Comme tu peux le voir ici, le problème vient d'une gestion du background sur le <td> ou le <tr>.
Tu dois le basculer sur ton élément <table> car c'est lui qui supporte les arrondis (j'ai d'ailleurs viré les arrondis sur les différents <td>).
Genre add/removeClass sur le parent 'table'...

tm

http://dabblet.com/gist/4013712

regarde si un box-shadow externe te convient. http://dabblet.com/gist/4013724

j'en ai mis deux décalés pour que tu visualise les effets et emplacements a toi de les repositionné et de les agrandir .
ex: table{box-shadow:0px 0px 5px 5px #931C1C;}
++

sinon, le plus simple est d'aussi appliqué le border-radius sur ton td:first-child et last-child ...
Modifié par gc-nomade (04 Nov 2012 - 21:55)

tm™ a écrit :
Re,

Comme tu peux le voir ici, le problème vient d'une gestion du background sur le &lt;td&gt; ou le &lt;tr&gt;.
Tu dois le basculer sur ton élément &lt;table&gt; car c'est lui qui supporte les arrondis (j'ai d'ailleurs viré les arrondis sur les différents &lt;td&gt;).
Genre add/removeClass sur le parent 'table'...

tm

Eu, là je fatigue grave je crois
Alors déjà oui j'avais même pas tilté les arrondis viré des td (bravo).

Voici mon script initial pour le jQuery qui change la couleur, je n'arrive pas à l'adapter :

	$('tr').hover(
		function() {
			$(this).addClass("hover");
		},
		function() {
			$(this).removeClass("hover");
		});

Modifié par MagicCarpet (04 Nov 2012 - 21:59)

Comme visiblement, tu dois pouvoir mettre une couleur sur tes lignes de tableau, j'ai revu ma copie...
Ceci semble fonctionner sous webkit et firefox.

A noter que :
- le retour des border-radius sur les 4 cellules de coins (en plus du border-radius sur le tableau).
- le border-radius des cellules est plus petit que celui du tableau (border-width en moins).
- le background-color doit être mis sur les cellules (car elles ont le coin arrondi...).

Ta règle css devrait donc ressembler plutôt à ça :

.hover td {
	background-color: #5D1212 !important;
}

Et tu ne touches pas à ton jQuery...

tm

Bon a priori tu me rassures car en l'état je ne voyais vraiment pas comment faire.

Par contre je verrai ton code demain, je serais moins crevé, parce que là je suis pas sûr d'y arriver du premier coup

Bonne nuit et à demain, merci pour vos réponses dans tous les cas.
Modifié par MagicCarpet (04 Nov 2012 - 22:47)

Bon alors Tm, j'ai apporté les modifications...

Juste une question et un petit truc qui me gène (mais je chipote et je sais comment l'arranger, c'est juste que je ne comprends pas).

Déjà voici le CSS re-modifié pour correspondre à mes réglages. Je n'ai changé que les valeurs pour correspondre au reste mais pas se que tu m'as passé :

table {
	font-size: .8em;
	margin: 0 auto;
	width: 96%;
	background-color: #A41F1F;
	border: solid 1px #5D1212;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 16px;
}
/* Vérifier si ce padding est ok par apport au CSS qui se trouve sous Linux : */
td {
	padding: 1px;
}
tr + tr td {
	border-top: solid 1px #5D1212;
}

tr:first-child td:first-child {
	/* border-top-left-radius: 14px; */
	border-radius: 14px 0 0 0;
}
tr:first-child td:last-child {
  border-radius: 0 14px 0 0;
}
tr:last-child td:first-child {
  border-radius: 0 0 0 14px;
}
tr:last-child td:last-child {
  border-radius: 0 0 14px 0;
}

Donc le truc où je chipote c'est le décalage qu'il y'a entre les deux arrondis (celui du <table> et du rollover que je n'avais pas avant). Je peux régler ça facilement si je met une valeur de radius à 16px sur le <table>. Juste si tu sais pourquoi, j'aimerais bien comprendre.

Voir ci-dessous une capture d'écran (je le redis, je chipote ) :



La question concerne le :

tr:hover td {
  background: black;
  color: white;
}

Parce qu'il n'est pas dans mon CSS et il fonctionne très bien. En relisant le code j'avais pas tilté au tr:hover... C'est mon jQuery qui fais un add et removeClass parce qu'il me semble que le :hover ne fonctionne pas partout...

N'ayant pas retrouvé les réglages que je pensais pour supprimer cet effet disgracieux, j'ai dû encore chercher une autre solution.

Le CSS devient un peu plus complexe mais au moins l'effet est comme au début, sans défauts.

Par contre, autre problème, le roll-over cache la bordure des lignes. J'ai donc un peu joué avec l'Alpha pour atténué ça et obtenir se que je voulais.

Voici le code CSS ci-dessous, si vous avez des questions, ou autres idées, n'hésitez pas à m'envoyer un message privée car je ne suis pas sûr de voir à nouveau ce post.

Merci en tout cas pour vos réponses et votre aide.

table {
	font-size: .8em;
	margin: 0 auto;
	width: 96%;
	background-color: #A41F1F;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 10px;
}

td {
	padding: 1px;
	border-bottom: solid 1px #5D1212;
}

td:first-child {
	border-left: solid 1px #5D1212;
}

td:last-child {
	border-right: solid 1px #5D1212;
}

tr:first-child td {
	border-top: solid 1px #5D1212;
}

tr:first-child td:first-child {
	border-radius: 10px 0 0 0;
}

tr:first-child td:last-child {
	border-radius: 0 10px 0 0;
}

tr:last-child td:last-child {
	border-radius: 0 0 10px 0;
}

tr:last-child td:first-child {
	border-radius: 0 0 0 10px;
}

EDIT : Ne fonctionne pas sous Firefox, les bords restent carrés...

Re-bonsoir...

J'ai hésité à faire un nouveau post mais comme dis ci-dessus mon roll-over sur le tableau ne fonctionne pas sous Firefox ni sous Opera.

Comment peut-on faire des angles arrondies pour des lignes de tableau ?
Le tableau en lui même est arrondi, mais pas les premières et dernières lignes... Du coup, le rollover non plus.

Merci pour vos réponses. (j'ai essayé plusieurs commandes CSS, regardé Google mais je ne trouve pas).
Modifié par MagicCarpet (08 Nov 2012 - 19:54)