Bordure tableau

Bonjour à tous,

Cela fait longtemps que j'essaie, en vain, d'appliquer 2 bordures différentes au cellules de mon tableau.

Ce que je souhaite c'est réaliser un effet de relief en collant un bordure clair a une bordure sombre (vous pouvez voir en exemple les élements de la sidebar que j'ai faite ici.

Donc ici pas de problèmes j'applique simplement un border-top et un border-bottom différent.
Cependant dans le cas d'un tableau, si jamais pour un même "tr" j'applique une bordure en haut et une en bas différentes alors il y en aura une des deux qui prendra le dessus masquant l'autre.

J'ai jamais bien compris le système des tabeaux avec les border-collapse et autre, mais si vous avez une réponse à ma question n'hésitez pas .

Merci d'avance,

JB

Ps: voici une page qui pose problème (en inspectant vous verrez que dans le css les deux bordure sont affecté au tr mais seulement celle du bas est prise en compte): http://sscol.jebal.comuv.com/document.php
Modifié par thej8 (01 Jun 2013 - 18:09)

salut,
ce que tu cherches n'est pas trop possible vu que tes cellules ont fusionnées et qu'elles ne peuvent par conséquent pas présenter deux bordures distinctes.
Tu peux par contre tricher avec les pseudo-éléments :before et :after. Voici un exemple. (pas testé sur les navigateurs autres que FF)

Hello,

Un exemple à adapter à ton besoin.
Sinon, une image de 2px de haut bicolore en image de fond répétée ?

Merci beaucoup pour votre aide et j'ai choisi la simplicité (et surement aussi ce qui est le plus croos-browser) : l'image.

@6l20 J'avais trouvé l'exemple que tu m'a donner mais j'ai jamais réussi à l'intégrer à mon tableau

@Zelalsan c'est une très bonne idée cependant comme je ne controle pas la hauteur des cellules cela aurait surement été casse geule. Mais merci quand même je garde en mémoire .

Hello,

Rapidos (j'ai recopié ton code à l'arrache) juste modifié cette histoire de bordures (tr/td) :
http://dabblet.com/gist/5699603
Ça semble fonctionner, non ?

Merci beaucoup j'essairai de comparer (mais bon pour l'instant objectif bac ... mais qu'est ce que je fais encore ici, je retourne à mes bouquins ).

Salut,
Voici encore une autre solution...

<table>
			<tr>
				<td>a1</td>
				<td>a2</td>
			</tr>
			<tr>
				<td>b1</td>
				<td>b2</td>
			</tr>
			<tr>
				<td>c1</td>
				<td>c2</td>
			</tr>
			<tr>
				<td>d1</td>
				<td>d2</td>
			</tr>
			<tr>
				<td>e1</td>
				<td>e2</td>
			</tr>
		</table>

table{
				border-collapse: separate;
				border-spacing: 0;
				background:#ccc;
			}
			td{
				border-left:none;
				border-right:none;
				border-top: 1px solid #999;
				border-bottom: 1px solid #ddd;
			}

Simple et passe partout

edit: pardon 6l20, je n'ai pas vu ton post
Modifié par Yordi (04 Jun 2013 - 12:33)