2010-09-01 22 views
1

Dans le tableau suivant, le premier contenu de cellule est généré dynamiquement. Le texte long dans la deuxième cellule provoque la croissance de la largeur de la table au-delà de ce qui est nécessaire pour s'adapter à la première cellule.Comment ajuster la largeur d'une rangée à la largeur des autres rangées d'une table?

Comment puis-je faire envelopper la cellule inférieure sur une autre ligne, au lieu d'élargir la table?
Je ne peux pas utiliser une largeur fixe pour la seconde cellule, car le premier contenu de cellule n'est pas connu avant l'exécution.

<table border="1"> 
    <tr><td>name: <input type="text"></input></td></tr> 
    <tr><td>blah blah blah blah blah blah blah blah blah blah</td></tr> 
</table> 
+0

Ajouté 'gwt' tag comme Google Web Toolkit semble être quelque chose que vous êtes enfermé dans, mais ne mentionnez pas jusqu'à ce que les gens répondent. – Jakub

+0

Je suis confronté au même problème. Avez-vous trouvé une solution ? –

+0

Si je me souviens bien, j'ai travaillé autour de lui en définissant la largeur en fonction de certaines conditions heuristiques. –

Répondre

1

Tout d'abord, ne vous fermez l'entrée comme vous le faites, procédez comme suit:

<input type="text" /> 

Deuxièmement: Il suffit de donner la table une largeur fixe:

<table border="1" style="width: 400px;"> 
    <tr><td>name: <input type="text" /></td></tr> 
    <tr><td>blah blah blah blah blah blah blah blah blah blah</td></tr> 
</table> 

Ah et enfin troisième: Ne pas utiliser les tableaux pour les mises en page. Même les formulaires peuvent être faits sans table.

+0

Tout d'abord, l'entrée est juste un exemple. Il représente du contenu généré dynamiquement. Deuxièmement, comme je l'ai dit, je ne peux pas donner une largeur fixe (à cause de la première). Enfin, je n'utilise pas de tables pour la mise en page. Mon cadre (GWT) fait. –

+0

La suggestion était d'utiliser une largeur fixe sur la table, pas sur la cellule du tableau. Cela entraînera le texte à envelopper plutôt que de développer son conteneur. – roryf

+0

Je voudrais que la largeur de la table corresponde à la largeur requise par les composants de la première cellule du tableau. –

0

Vous ne savez pas pourquoi vous dites que vous ne pouvez pas utiliser une largeur fixe car vous dépendez de la première cellule. Vous pouvez le calculer au moment de l'exécution en vérifiant la valeur de la seconde cellule, et si elle est plus longue qu'une certaine largeur définie, vous appliquerez une largeur définie à votre cellule. Si la sortie pour la 2ème cellule n'est cependant pas très longue (et ne déclenche pas la vérification de votre longueur), vous n'avez pas besoin d'ajouter de définition de largeur.

Cela me semble simple, mais mon hypothèse ici est que vous utilisez un langage de script sur le côté pour générer ce contenu, sauf si vous voulez dire que c'est PURE html, auquel cas j'aborderais le problème avec une bibliothèque JS comme jQuery et faire la même longueur vérifier sur la valeur et si elle est déclenchée ajouter une définition de largeur pour votre cellule.

+0

Le code HTML est généré par GWT. Le vrai HTML est beaucoup plus complexe. C'est une boîte de dialogue générique qui peut avoir des composants arbitraires, donc chaque boîte de dialogue aura une largeur différente. Au bas de ma boîte de dialogue générique, il y a une ligne d'état qui peut présenter différents textes. Si le texte d'état est long, il doit passer à la ligne suivante, ce qui rend le dialogue un peu plus élevé, mais pas plus large. –

+0

Envelopper votre sortie dans un div avec quelque chose comme 'max-width: 200px;' travail? Pourrait techniquement utiliser un div pour empêcher le contenu de diffuser la cellule trop loin de votre largeur prédéfinie. – Jakub

+0

Non, puisque la largeur est * non * prédéfinie. –

0

Moi aussi j'aurais aimé une solution à cela. Les réponses à cette autre question indique qu'il n'y a pas de réponse facile ...

HTML TD wrap text