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

Bonjour,

J'expose un peu le problème :

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

                <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 :

    .moduleBar
	{
		width: 100%;
		white-space: nowrap;
		vertical-align: middle;
		padding: 0;
		margin: 0;
	}

Sous classe des div incluses dans le tableau :

               .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)

Cordialement
Modifié par Foums (14 Feb 2011 - 16:40)

Hello,

Je n'ai rien pour vérifier, mais je pense que tu devrais passer au mode de rendu fixé :

table {table-layout: fixed;}

Merci Raphael de ta réponse. Je viens de tester la solution que tu suggère mais même s'il y'a un mieux c'est pas encore ça.
en table-layout : fixed les 3 cellules du tableau ont désormais la même largeur mais ne s'adapte toujours pas au contenu (chose qui devrait être le fonctionnement logique).

en gros le but du rendu est relativement simple :

deux cellules dans lesquels on va mettre un contenu (du texte en l'occurrence) et une dernière qui prend une image en repeat-x qui prendra finalement le reste de la place.

Pour le moment les deux première cellules n'ont pas de comportement standard et je ne comprend pas pourquoi.

Est-ce le même problème que :
http://forum.alsacreations.com/topic-4-53754-1.html

adrien881 a écrit :
Est-ce le même problème que :
http://forum.alsacreations.com/topic-4-53754-1.html

Non pas vraiment et j'étais déjà tomber sur cette discussion en cherchant

ceci étant dit j'ai trouvé une solution à mon pb

.moduleBar td+td+td
{
    weight: 100%;
}

donc problème résolu en ce qui me concerne

merci de votre apport