Discussion :

[aelmalki]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

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

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<td width="60%"><input type="text" value="" style="width: 100%;" /></td>

[aelmalki]

Merci beaucoup.

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

[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 ?

[aelmalki]

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

Alors voila mon exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[vermine]

Ca se sont les problèmes des pourcentages. Vous ne pouvez pas préciser une taille fixe en pixels ?

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

[devyan]

Bonjour,

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

devyan.

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

[aelmalki]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[vermine]

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

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

[aelmalki]

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[aelmalki]

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

[vermine]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

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

[vermine]