Tableaux et border-spacing

Bonjour

J'ai donc des données tabulaires... dans un tableau Et j'aurais voulu un peu d'espace entre mes <tr>. J'ai donc découvert ce joyeux attribut là : border-spacing.

Joyeux attribut qui fonctionne tout à fait sous Firefox bien sûr, mais qui est par contre tout aussi joyeusement ignoré par IE.

Quelqu'un connaîtrait-il une correspondance, un truc, ou quoi que ce soit d'autre qui puisse fonctionner pour les deux ?

Merci d'avance !

Bonjour, il me semble, à force de m'être arraché les cheveux avec ce genre de problème, qu'il est nécessaire d'ajouter dans la balise <table> les propriétés cellspacing="0" cellpadding="0" pour être sur que les propriétés css soient affichées de la même façon sous IE et sous FireFox. Ces deux propriétés semblant décisives dans l'affichage des tableaux sous IE et inexistantes dans les feuilles de style.
Modifié par asmo94 (07 Jul 2006 - 00:39)

Bonjour et merci !
Mais avec ces balises là, je ne peux pas choisir de donner une marge au bas uniquement par exemple, non ? Si j'applique un cellspacing="qqch" ça m'ajoutera aussi des marges sur les côtés ? Ce que je ne veux absolument pas

En effet, mais celà sert pour avoir un comportement du tableau sous IE proche de celui sous FireFox. Mea culpa, les margin sur les tr c'est pas tout à fait ça... en revanche, j'en reviens à cellspacing="5" qui équivaut sous IE au border-spacing:5px sous FireFox... D'où un éventuel:

html:

<table id="id_tableau" cellspacing="5">
 <tr>
  ...
 </tr>
</table>

css:

#id_tableau {
border-spacing:5px;
}

C'est incroyable comme adapter un code aux normes pour l'afficher sous IE donne l'impression de faire de la plomberie Pour l'espacement latéral... il sera entre chaque cellule du tableau mais pas avec les bordures... Il existe peut-être une solution miracle auquel cas quelqu'un de plus qualifier aura surement la réponse. Bon courage.
Modifié par asmo94 (07 Jul 2006 - 01:09)

Sous FF j'utilise ceci pour modifier l'espace entre mes <tr> verticalement :

border-spacing: 0px 10px;

Ceci ne modifie pas du tout l'espace horizontalement.

Le cellspacing="5" par contre, lui il modifie tout

Vu que border-spacing n'est pas gérée par IE et que cellspacing est trop limité pour résoudre ce problème. Je ne vois qu'un éventuel spacer que seul IE afficherait. D'autres avis apporteront surement un éclairage différent au problème, espérons le du moins.

La solution de Corinne me semble la plus adequate et la plus simple, il en revanche bizarre que ça ne fonctionne pas sous IE (une fois n'est pas coutume)
Modifié par broadcastor (07 Jul 2006 - 12:13)

pour que le paramètre CSS border-spacing fonctionne, il faut spécifier le comportement border-collapse qui permet d'indiquer si on veut ou non que les bordures soient collées (et donc parx exentsion si on veut qu'elle soient espacées, et dans ce cas de combien)

il y a une adresse sympa pour faire des tests :
http://www.somacon.com/p141.php

pour ma part je n'arrive pas à comprendre la difference entre :

table.sample {}

.sample table {}

le deuxième ne semble ne pas marcher.

(nb: tres jolis dessins corinne ... les visages sont tres sympas)

bugpics a écrit :
pour ma part je n'arrive pas à comprendre la difference entre :

table.sample {}
.sample table {}

C'est assez simple

table.sample{}

signifie dans le code HTML

<table class="sample">

tandis que

.sample table{}

signifie dans le code HTML

<n'importe quelle balise class="sample"><table></table></n'importe quelle balise>

(cad la table est imbriquée dans une balise de classe sample et pas forcément au premier niveau, ça peut tout aussi être quelque chose du genre

<div class="sample"><div id="toto"><table>