Width à 100% pour un input text dans une cellule : échec.

Salut,

Mon problème est assez simple à résumer : je n'arrive pas à faire en sorte qu'un input de type texte s'étire et remplisse proprement une cellule de tableau. Lorsque je fixe sa largeur à 100%, il déborde toujours sur la droite, alors qu'un contrôle comme le select s'étire convenablement.

Première étape :

Je crée un tableau simple, deux colonnes et deux lignes. Je ne donne aucun style à mes deux contrôles imbriqués dans le tableau (un input et un select).

.testtable
{	
	border:solid 1px blue;
	width:400px;
}

.testtable td
{
	border:solid 1px red;
	width:200px;
}

<table class="testtable">
   <tr>
      <td>Test :</td>
      <td ><select><option selected="selected">Test</option></select></td>
   </tr>
   <tr>
      <td>Test :</td>
      <td ><input type="text" value="Test" /></td>
   </tr>
</table>

Résultat :

Tout semble ok jusqu'à présent.


Deuxième étape :

J'ajoute dans ma feuille de style :

.testtable input
{
	width:100%;
}

.testtable select
{
	width:100%;
}

Le code HTML n'est pas modifié.

Résultat :

L'input de type texte déborde :


Avez-vous une idée ? Je vous remercie d'avance...

Bonjour,

Pour ne pas dépasser, l'input ne devra pas avoir:
- de border;
- de margin;
- de padding.
Qui s'ajoutent à la largeur définie pour l'élément.

À voir aussi si passer en display: block ne faciliterait pas les choses.

Enfin, il faut savoir que l'utilisation des styles CSS sur les éléments de formulaires est relativement aléatoire.
http://blog.alsacreations.com/2007/06/12/366-comment-ne-pas-styler-les-elements-de-formulaire

Merci pour la réponse,

Lorsque je spécifie explicitement que mon input n'a ni border, ni margin, ni padding, le problème subsiste. Idem lorsque je joue avec la propriété display.

Ce que je ne comprends pas, c'est pourquoi l'input ne parvient pas à s'étirer correctement quand le select y arrive. Cela dit, il y a plein d'autres trucs que je comprends pas. Je veux dire, dans la vie.

En tout cas, le lien est intéressant. Si tu as d'autres idées et/ou pistes, je suis preneur.

Merci !