[résolu] Positionnement en ligne de tableaux contenu dans une div

Bonjour,

Je commence à avoir les yeux qui piquent et les mains qui tremblent suite à un problème de positionnement.
Mon but est d'aligner plusieurs tableaux "table" en horizontal dans une même div. (ne me demander pas pourquoi des tableaux, se serait trop long à expliquer )

Je m'explique :
- j'ai une div qui s'appelle "content".
- dans cette div apparaissent plusieurs "table" qui sont positionnées l'une sous l'autre. Mon objectif est de les placer l'une à côté de l'autre.

Je ne suis pas un pro du "float:left" ou du "display". Mais voici ce que j'ai codé et qui ne marche pas :

#content {
	position: absolute; /* très important, je ne peux pas faire sans */
	margin: 135px 0 0 195px;
	height: 440px; /* la hauteur est fixe */
	width: auto; /* la div doit être étirable sur sa largeur */
}
.postable{ /* voici une class que j'ai ajouté à ma balise "table" */
	float: left;
	width: auto;
	height: 440px;
}

Quand au code html, voilà en résumé le contenu :

<div id="content">

 <table ... class="postable">
    <tr><td></td></tr>
</table>

 <table ... class="postable">
    <tr><td></td></tr>
</table>
</div>

Je m'excuse d'avance si ce post n'est pas assez clair, mais je suis un peu crevé et de bons conseils me seraient fort utiles !!!!

Merci
Modifié par nforum (05 Jun 2009 - 10:15)

Je n'ai jamais fais l'essai d'aligner des tableaux comme tu le décris, et j'ai un peu la flemme de le faire à cette heure avancée.

Idée :
Avoir un bloc unique contenant les tableaux est il indispensable ?
Si la propriété float ne passe pas sur une table, tu peux les encapsuler dans un bloc supplémentaire

<div id="content">
<div class="table-container"><table></table></div>
<div class="table-container"><table></table></div>
</div>

Là au moins, tu es sûr de pouvoir les faire flotter ... même si je reste dubitatif sur le fait de ne pas pouvoir l'appliquer directement aux tableaux.
Modifié par Gryzzly (05 Jun 2009 - 03:31)

Bonjour,

Le problème vient très certainement du manque que width.

Tes tableau comme leur conteneur sont en witdh:auto; ils ont donc la même largeur. Ce qui empèche les tableau de se mettre l'un à côté des autres (il n'y a pas la place).

Il faut que tu donne à tes tableau une largeur précise et à ton contenu la largeur de somme des largeurs des tableaux.

Si tu ne connais pas la largeur totale du conteneur (nombre de table variable...), tu peux faire le calcul avec PHP (si tu connais le nombre de table et leur largeurs) ou JS (si tu n'as pas ces infos)

Par contre pas la peine de toucher au HTML, il devrait fonctionner.

Gryzzly > La divite aigüe c'est mal

Merci pour la réponse Anne-Laure (et grizzly).
Je crois que vu les circonstances et ne maîtrisant pas js, je vais encapsuler mes tableaux dans un tableau contenant une ligne

Je suis bien loin d'un bon css, mais c'est ma seule solution.

En tout cas merci
Modifié par nforum (05 Jun 2009 - 10:14)

Laurie-Anne a écrit :
Gryzzly > La divite aigüe c'est mal

Peut être. Alourdir son code avec du js, c'est pas mieux...
Y'a une nuance entre divite comme tu semble le dire et gains de performance, de temps de dév. pour éviter de s'embêter avec des stupidités.

Je te mettrais même volontier au défi de réaliser certaines interactions visuelles (full css), sans recourir aux blocs et js...