TD ne s'adapte pas à son contenu [Résolu]

[Foums]

Bonjour,

J'expose un peu le problème :

j'ai un tableau très simple composé d'un <tr> contenant 3 <td>

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 <table class="moduleBar"> 
                        <tr> 
                            <td> 
                                <div class="moduleContext"> 
                                    ModuleContext 
                                </div> 
                            </td> 
                            <td> 
                                <div class="stayContext"> 
                                    SayContext 
                                </div> 
                            </td> 
                            <td> 
                                <div class="moduleHrBar"> 
                                    &nbsp; 
                                </div> 
                            </td> 
                        </tr> 
                    </table>

Disons que j'ai un impératif, c'est que je ne peux pas mettre de class sur un td.

la class globale de la table :

Code :

1
2
3
4
5
6
7
8
  .moduleBar 
    { 
        width: 100%; 
        white-space: nowrap; 
        vertical-align: middle; 
        padding: 0; 
        margin: 0; 
    }

Sous classe des div incluses dans le tableau :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
        .moduleContext 
        { 
            padding-left: 10px; 
            font-size: 20px; 
            font-weight: bold; 
            color: #085187; 
            cursor: pointer; 
        } 
        .stayContext 
        { 
            padding: 10px; 
            margin: 0; 
        } 
        .moduleHrBar 
        { 
            width: 100%; 
            background: url(../img/moduleHr.png) repeat-x; 
            height: 40px; 
        }

le pourquoi de cette construction c'est que je ne peux pas mettre de class sur mes td (ça fait partie des spec de ce projet) et les td doivent rester variable en taille en fonction de leur contenu.

Mon problème que je n'explique pas depuis maintenant 3h00 que je cherche un peu dans le vent c'est que pour des raisons inexpliquée pour moi, les deux premier td de ma table ne s'adapte pas à leur contenu est sont super large (genre 800px pour le premier et 300 pour le second) ce qui fait que le troisième est minuscule.

Si quelqu'un a une idée sur le pourquoi ou encore mieux une solution je suis preneur.

note : ce tableau est contenu dans une div qui est elle même contenu dans un tableau (oui je sais utiliser un tableau pour construire un layout c'est mal mais j'ai pas trouvé mieux pour gérer mon projet). Le tableau conteneur contient 3 colonnes. les deux colonnes à chaque extrémité ont un width de 18px et la colonne central prend tout le reste de la page (en % donc)

PS : j'ai effectuer un dernier test en ajoutant un "table-layout : fixed;" sur la class de la table mais le résultat n'est pas satisfaisant.

Cordialement

[ornitho13]

Si tu veux 3 colonnes de même taille, il faut spécifier une largeur à tes TD.
Comme tu ne peux pas utiliser de class, dans ta CSS, utilise le tag HTML "td"

Code css :

1
2
3
4
 
.moduleBar td{
    width:33%;
}

[NoSmoking]

si tu veux que les 2 premières s'adaptent en largeur et que la dernière occupe la place restante

Code :

1
2
3
.moduleBar td+td+td  {
  width : 100%;
}

[Foums]

Envoyé par NoSmoking

si tu veux que les 2 premières s'adaptent en largeur et que la dernière occupe la place restante

Code :

MERCI ! ça marche nickel

problème résolu