Version complète: sur le forum Webmaster Hub : Aligner à gauche les cellules d'un tableau à 100%
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
Toucouleur
s'il vous plait aidez moi, j'en peux plus de rechercher dans les docs, de faire des combinaisons, j'en peux plus...

j'ai un tableau avec un id="tube"

et ma feuille de style donne ça :

CODE
#tube {
    background: url("design/bar_products.png") repeat-x left top;
    height: 39px;    
    padding-left: 5px;
    padding-right: 5px;
    color: #fff;
    float:left;
    width: 100%;
 margin-right: auto;
 margin-left: 0;
}


On va dire que dans ce tableau, j'ai 3 cellules, dans les quelles je met "toto" , "tata" et "titi".

donc grosso modo

CODE
<table id="tube">
 <tr>
   <td id="autre_id">toto</td>
   <td id="autre_id">tata</td>
   <td id="autre_id">titi</td>
 </tr>
</table>


et bien pas moyen de garder mon tableau qui garde son fond et de caller toutes les cellules à gauche mad2.gif elles se mettent à interval régulier, mais pas moyen de les "coller" à gauche sauf si je rajoutte un dernier <td width="100%">&nbsp</td> mais que IE me gère n'importe comment...

Please... help !!!
Toucouleur
je suis pas clair dans mes explications ou y'a pas de solution à mon pb ?
Perrine
Salut Toucouleur, crie pas comme ça, tu deviens tout rouge wink.gif

Tu peux nous montrer un screenshot de ta page ? (J'imagine que tu as ton site en local et qu'il est impossible de le voir en ligne ?)
Dan
Bonjour,

Si tu définis ton tableau avec une largeur de 100% ... je ne vois pas comment tu peux espérer faire coller les cellules à gauche.
Elles auront, sauf spécification contraire dans le style de #autre_id, une largeur de 1/3 du tableau chacune.

Dan
Toucouleur
bon je vous fais une démo rapide, si dessous le tableau dessiné sous photoshop



et le tableau que j'arrive à générer avec mes feuilles de style (faites pas fagges aux intitulés, j'ai pas changé la BDD)



donc Dan, d'après toi, j'ai pas e solution idéal ?

car pour me faire l'arrondi, j'utilise un id de ma feuille de style, un autre id pour l'arrondi de droite , et les autres sont encore avec un autre id.

Notes que sous IE, que je mette mon tableau à 100% ou non, pas moyen de coller les cellules, faus si j'en rajoutte une vide comme je l'ai expliqué plus haut.

C'est quand même pas croyable que ce bordel soit limité comme ça !!
Dan
Ce que je ne comprends pas c'est pourquoi tu utilises un tableau alors qu'il te sufirait d'un div conteneur, et d'une série de div en float:left à l'intérieur.

Dan wink.gif
Toucouleur
CITATION(Dan @ lundi 19 décembre 2005, 17h34)
Ce que je ne comprends pas c'est pourquoi tu utilises un tableau alors qu'il te sufirait d'un div conteneur, et d'une série de div en float:left à l'intérieur.

Dan wink.gif
*

parceque j'ai la flemme de recoder mon extracteur de catégories déjà utilisé sur pleins de mes sites...

bon ok mais c'est quand même la merde ces tableaux sad.gif
Remi
Supprime la largeur du tableau et définis les largeurs pour chaque cellule.
(et il faut se rappeler que Firefox ne respecte pas les 'colgroup', il faut mettre les largeurs au niveau des 'td' ... (sauf si le fait de valider est important à tes yeux)).
Dudu
CITATION(Dan @ lundi 19 décembre 2005, 17h34)
Ce que je ne comprends pas c'est pourquoi tu utilises un tableau alors qu'il te sufirait d'un div conteneur, et d'une série de div en float:left à l'intérieur.

Dan wink.gif
*
Encore mieux:

il suffirait d'un ul conteneur, et d'une série de li en float:left à l'intérieur wink.gif
Car si je ne m'abuse, çà ressemble fort à une liste smile.gif

Pour l'HTML je le vois comme çà, à vue de nez
HTML
<ul id="tube">
<li class="active">Accueil</li>
<li class="gauche">Défense</li>
<li>Armes</li>
<li>Optiques-lampes</li>
<li class="droite">Coutellerie</li>
</ul>


Bon courage
Toucouleur
merci Dan & dudu / vos encouragement, j'ai tout recodé selon la méthode dudu, j'ai eu du mal à le faire fonctionner comme je voulais, mais ce coup çi, c tout bon...


je vous montrerai à quoi ça ressemble une fois fini, ça peut faire un cas d'école wink.gif
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.