Un INPUT TEXT qui prend la taille d'un TD

Version imprimable

23/05/2010, 21h45
aelmalki

Un INPUT TEXT qui prend la taille d'un TD
Bonjour TLM,

J'ai un tableau avec des TR et des TD comme le veux la tradition des tableaux, et j'ai un champ text que je veux le redimensionner selon la taille de mon TD:

Exemple :
Code:

1 2 3 4 5 6 7 <table width="100%"> <tr> <td width="40%">Nom :</td> <td width="60%"><input type="text" value="" /></td> <tr> </table>
Je veux que mon text prend la largeur de tous le TD (60%) sans fixer un size fixe, l'inconvénient du size fixe dans mon cas c'est que si je change de résolution d'écran, mon tableau sera un déformé en quelque sorte.

Est ce que vous avez une idée ?

Merci beaucoup !
24/05/2010, 09h00
RunCodePhp
Salut

En 1er, tu as une petite erreur : <tr> au lieu de </tr>

Pour qu'un élément prenne toute la largeur du conteneur, et bien c'est : width: 100% :
Code:

1 2 <td width="60%"><input type="text" value="" style="width: 100%;" /></td>
24/05/2010, 17h32
aelmalki

Merci beaucoup.
02/06/2010, 12h26
aelmalki

Je me permet de retourner sous ce post,

En fait, 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

Est ce que vous avez un idée ?

Je dois élargir le champ sur mon TD, mais le champ texte ne doit pas afficher tous les caractères saisie.

Merci infiniment.
03/06/2010, 07h42
vermine

Bonjour,

Je ne comprends pas ce que vous voulez dire. Pourrions-nous voir le nouveau code et avoir une explication plus détaillée de ce qui vous pose problème ?

Oui, bien sur, merci pour votre interêt.

Alors voila mon exemple :
Code:

1 2 3 4 5 6 7 <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.

03/06/2010, 10h31
vermine

Ca se sont les problèmes des pourcentages. Vous ne pouvez pas préciser une taille fixe en pixels ?
03/06/2010, 10h38
aelmalki

Justement, je ne peux pas le faire : la page doit être utilisé dans différent machine et forcement les écrans n'ont pas la même résolution.

Est ce que vous avez d'autre suggestions ?

Merci infiniment.
04/06/2010, 09h57
devyan

Bonjour,

Si cela ne fonctionne pas avec TABLE/TR/TD essaye donc avec DIV ;)

devyan.
04/06/2010, 13h08
aelmalki

Vous voulez que j'utilise un DIV à la place d'un TABLE ?

Est ce que vous pouvez me donner plus d'explication s'il vous plait ?

Merci beaucoup.

Bonjour TLM,

Voila, il faut modifier le style du tableau : table-layout:fixed qui, avec les widths dans les td permet de faire l'affaire :
Code:

1 2 3 4 5 6 <table width="100%" style="table-layout:fixed" 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>
Merci beaucoup pour vos contributions.

04/06/2010, 21h46
vermine

Arf, ça marche sur FF mais pas sur IE6 et IE7. :cry:

Vous pouvez peut-être lire ce post-ci et sa référence.

J'ai testé avec IE7 et ça marche super bien

Vous pouvez tester avec et sans le table-layout:fixed

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<html>
<head></head>
<body>
<table width="100%" border="1" style="table-layout:fixed">
  <tr>
     <td width="50%"><input type="text" style="width:100%;" 
 
value="1234567891234567891234567891234567891234567891234567891234567890000000089123456789123456789123456789

12345678912345678912345678900000000891234567890"  /></td>
     <td width="50%"><input type="text" value="TEST" /></td>
  <tr>
</table>
</body>
</html>

04/06/2010, 22h18
aelmalki

Pour information ça marche sur Chrome et Fire fox sans modifier le style du tableau !

Je suis navré mais je reprends vos deux exemples. Le premier ne fonctionne pas sur IE7 mais le second bien:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<html>
<head></head>
<body>
<table width="100%" syle="table-layout:fixed" 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>
 
<table width="100%" border="1" style="table-layout:fixed">
  <tr>
     <td width="10%"><input type="text" style="width:100%;" value="123456789123456789123456789123456789123456789123456789123456789000000008912345678912345678912345678912345678912345678912345678900000000891234567890"  /></td>
     <td width="90%"><input type="text" value="TEST" /></td>
  <tr>
</table>
</body>
</html>

Seule différence que je vois, le second value est plus long que le premier. :?

05/06/2010, 02h49
aelmalki

Je pense que pour le premier tableau il faut modifier syle par style
J'ai fais la modification dans mon premier exemple : désolé, c'est une erreure de frappe de ma part.
05/06/2010, 08h39
vermine

Oups

:oops::oops::oops: