Retirer les espace automatique entre deux div ?

[Hyeki]

Bonjour !
Je viens encore demander de l'aide des plus ingénieux et fort que moi =3

Je voudrais créer un bête tableau avec une propriété div pour chacune d'elle (j'aurais éventuellement mis une class dans le td même mais ne sachant pas comment ça marche quand y a un rowspan="x" ou colspan="x" je n'ais pas osée), hors je constate qu'un espace se créé automatiquement entre chacune de mes cellules.

Avant j'aurais utilisé une margin/padding pour les coller l'une aux autres mais dans le cas ou le tableau a beaucoup de case, je trouve cette technique un peu farfelue ... Je me demandais donc si il n'y a pas un moyen d'annuler tout ça avec un display ou une commande spécifique qui ne me demande pas de faire des margin négatif (parce que firefox aime pas quand je vais dans le négatif ><). Bien sûr, comme je suis chiante, je ne veux pas annuler les espaces sur tout monde forum, mais juste de mon tableau ^^

Je vous donne un code à titre d'exemple =)

Code:

<table>
   <tr>
      <td><div class="div1">contenu 1</div></td>
      <td><div class="div2">contenu 2</td>
   </tr>
   <tr>
      <td><div class="div2">contenu 3</div></td>
      <td><div class="div3">contenu 4</div></td>
   </tr>
   <tr>
      <td><div class="div3">contenu 5</div></td>
      <td><div class="div1">contenu 6</div></td>
   </tr>
</table>

Et le CSS avec juste taille et couleur pour qu'on puisse y voir mieux :

Code:

.div1{
   width: 200px;
   height: 100px;
   background-color: blue;
}
.div2{
   width: 200px;
   height: 100px;
   background-color: orange;
}
.div3{
   width: 200px;
   height: 100px;
   background-color: red;
}

Merci à celui, ou celle qui m'apportera ses lumières =3

[Arias]

Bonjour,
Met un id sur ton tableau, puis ecris un CSS de ce genre:

Code:

/* s'applique à toutes les div qui sont dans le tableau monIdTableau...*/
#monIdTableau div
{
 margin: 0px;
 padding: 0px;
}

Cela fonctionne aussi avec une classe, par exemple ".maClasseTableau div"

[Hyeki]

Je viens d'essayer, j'ai donc mis dans mon css

Code:

.cate{
margin: 0px;
padding: 0px;
}

et dans mon html

Code:

<table class="cate">

Je n'ai hélas aucun changement. Ais-je fais une erreur quelque part ?

[Arias]

avec le code suivant:

Code:

.cate{
margin: 0px;
padding: 0px;
}

tu supprimes le padding et le margin autour de ton tableau, mais pas dans les cases de celui ci.

Ajoutes div après ta spécification de nom de classe dans le css pour spécifier que tu veux que ce style s'applique à toutes les div dans ton tableau; comme ca:

Code:

.cate div
{
margin: 0px;
padding: 0px;
}

[Hyeki]

Ah d'accord. Je viens de tenter avec le div devant, je n'ai pas de changement. Donc je pense que le soucis doit venir du HTML. Est-ce que

Code:

<table class="cate">

est correcte ou je dois carrément l’appeler

Code:

<table class="cate div">

[Arias]

Mmh non normalement le premier appel est bon.

Essaye d'ajouter "!important" après les 0px; comme ca:

Code:

.cate div
{
  margin: 0px !important;
  padding: 0px !important;
}

Si cela ne marche pas, il faudrait voir avec le debugger du navigateur.

As-tu un lien ou je peux voir le problème?

[Hyeki]

Je le fais depuis un page sur mon bureau en fait du coup, hormis copier/coller le code directement, je n'ai pas de moyen pour rendre ça visible.
J'ai ajouté les !important derrière chaque propriété et encore une fois, malheureusement je n'ai aucune résultat. Du coup j'ai essayé avec

Code:

*{
margin: 0px !important;
padding: 0px !important;
}

Histoire de voir si j'ai un résultat, j'ai en effet un changement, mais il reste quelques écarts de 3px environ entre chaque div. Bon cette solution quoi qu'il en soit ne me conviens pas puisque je ne veux pas annuler les espaces ailleurs que dans mon tableau =(
J'ai l'impression d'être dans une impasse.

[Arias]

Pourquoi mettre des div dans les cases de ton tableau? Il est possible d'appliquer des styles directement sur les cases, comme ca:

Code:

<table>
   <tr>
      <td class="div1">contenu 1</td>
      <td class="div2">contenu 2</td>
   </tr>
</table>

et pour colspan ca s'utilise comme ca:

Code:

<table>
   <tr>
      <td class="div1">contenu 1</td>
      <td class="div2">contenu 2</td>
   </tr>
  <tr>
      <td class="div3" colspan="2">contenu qui fait 2 cases de large</td>
   </tr>
</table>

[Hyeki]

Parce que, comme je le disais plus haut, c'est un tableau d'exemple que j'ai fournis, l'autre est trop "grand" et sur le bon tableau, disons que j'ai quelques td et tr en colspan et rowspan et je ne sais pas absolument pas si on peux mettre une classe sur un td colspan par exemple, sinon ça aurais été d'avantages plus simple de simplement mettre ma classe sur le td en question.

[Arias]

J'ai édité mon message précédent pendant que tu ecrivais le tiens.

[Hyeki]

Je viens de le voir. Merci ! Je ne savais pas que c'était possible, je trouvais le rendu étrange à l'écrit *sort*

J'ai donc édité tout ça, mais il reste un tout petit décalage de quelques pixels (2-3 à mon avis). C'est déjà beaucoup plus propre mais ce n'est toujours pas collé ensemble =/

[Arias]

essaye de définir ton tableau comme ca:

<table cellspacing="0" cellpadding="0">

[Hyeki]

Ça marche ! J'avais pas pensé à ce petit spacing. Merci Arias, tu me sauve la vie et me permet enfin d'avancer plus loin n_n
Merci pour ta patience, vraiment ♥

[Arias]

De rien, bonne continuation