Un INPUT TEXT qui prend la taille d'un TD

Bonjour Alsacreation

J'ai un problème avec le style="width : 100%" dans le cas ou mon texte contient énormément d'information (plusieurs caractère), dans ce cas la, il affiche texte très grand : il affiche tous les caractères saisie

Alors voila mon exemple :

<table width="100%" border="1">

  <tr>

     <td width="10%"><input style="width: 100%;" type="text" value="12345678912345678912345678912345678912345678912345678912345678900000000"  /></td>

     <td width="90%"><input type="text" value="TEST" /></td>

  <tr>

</table>

Le premier TD à comme width 10%, si je met style="width: 100%;" pour le champ texte il prend effectivement les 10% du TD, mais si je met une valeur assez grande comme c'est cas dans l'exemple, mon texte déforme mon TD (vous pouvez tester sans value et avec value pour remarquer la différence)

Ce problème est constaté sous IE, Google Chrome, Fire Fox par exemple m'affiche le résultat souhaité(le texte respect le width du TD).

Alors, je vous demande de bien vouloir m'orienter pour que je puisse avoir un TD qui contient un champ texte, et qui respect la largeur du TD quelque soit les données mises dedans.

Merci pour votre intérêt et bon courage.

Bonsoir genisys,

Je n'ai pas très bien compris ton problème mais je vais quand même essayer de te répondre.
Donc, de ce que j'ai compris, tu voudrais que ton champ de saisie garde la même taille qu'il soit pré-rempli ou non ?

Voilà ce que je te propose :

<table width="100%" border="1"> 
	
		<tr> 
			<td><input type="text"  size="100" value="12345678912345678912345678912345678912345678912345678912345678900000000" /></td> 
			<td><input type="text" value="TEST" /></td> 
		</tr> 
 
	</table> 

Ici, j'ai retiré les tailles en pourcentage que tu avais mises pour ton champ et j'ai juste ajouté l'attribut size avec une valeur de 100 (tu peux changer cette valeur si tu le veux).
De ce fait, que ton champ soit pré-rempli ou non, il gardera toujours la même taille .
J'ai testé le rendu sous IE 6,7 et 8 ainsi que sous Firefox 3.6.3 et je n'ai pas constaté de problème.

Petites remarques au passage :
- J'en ai profité pour rendre ton code valide.
- Les tableaux pour structurer un site web, ce n'est pas très recommandé.
- Essaie de faire attention à ton orthographe.

En espérant t'avoir aidé .

Merci pour votre aide.

En fait j'ai 2 exigences :
- Mon texte doit prendre la taille du TD qu'il contient(10,20 ou 30 %).
- Mon texte ne doit pas déformer mon TD parce qu'il contient un value avec plusieurs caractères.

Votre solution répond à la ème exigence et pas sur les 2.

Je peux expliquer d'avantage si vous voulez, je reste disponible.

Merci beaucoup, j'espère vraiment avoir une solution pour respecter ces 2 exigences.

genisys a écrit :
- Mon texte ne doit pas déformer mon TD parce qu'il contient un value avec plusieurs caractères.

C'est le propre d'une cellule de tableau de tenter de s'adapter à son contenu. Quand tu places un élément en width:100% dans un TD, ça peut donner des trucs bizarres.

C'est le comportement par défaut des tableaux. Par contre, tu peux demander au navigateur d'utiliser un algorithme différent pour le calcul de la largeur des cellules. Cela se fait en CSS avec table-layout:fixed. Dans ce cas il faudra spécifier la largeur de chaque cellule, en pixels ou en pourcentages.

Les styles CSS pour les tableaux:
http://www.w3.org/TR/CSS2/tables.html

Merci infiniment Chef, c'est exactement ce que je cherche

Merci beaucoup.

À noter qu'un max-width sur la cellule de tableau peut aider aussi.