Ajuster la taille d'un INPUT

Version imprimable

01/08/2012, 15h24
benf35

Ajuster la taille d'un INPUT

Bonjour,

Je n'arrive pas à faire en sorte que mon input prenne toute la taille du td. En largeur c'est bon, mais en hauteur j'ai toujours un soucis.

Je précise que mon tableau est généré par une boucle, et que les td ont une taille variable.

J'ai bien essayé de mettre un 'height: 100%;' dans le css (pour le input), mais pas de changement. Le padding et le margin du css du td sont à 0 également.

Vous pouvez m'aider? Merci!
01/08/2012, 15h32
NoSmoking

Bonjour,
la hauteur d'un INPUT est plutôt liée à la taille de caractère et non la taille du parent.

Mets la hauteur en pixel, mais à mon sens cela n'a aucun sens de vouloir forcer la hauteur d'un INPUT
01/08/2012, 16h05
benf35

merci de m'avoir répondu!

la taille des inputs en px est possible, mais le tableau est à taille variable je ne peux donc attribuer une taille identique pour tous les inputs.

En fait c'est simplement une question d’esthétique, j'aimerais avoir des cellules comparables aux tableaux excel par exemple. C'est assez laid d'avoir dans un tableau avec 'border', un input mal positionné.

J'aimerais que le input épouse la forme du td. Si c'est possible bien sûr. Ou lors un autre moyen de rendre plus beau mon tableau.

je ne saisi pas trop ce qui fait que tes TD ont des hauteurs différentes si tu veux une succession d'INPUT.

un petit exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
html, body{
  font-size:1em;
}
table{
  border-collapse:collapse;
}
td{
  border:1px solid #e0e0e0;
}
td input{
  border:0;
  height:2.0em;
  line-height:2.0em;
}
input:focus{
  background-color:#f0f0f0;
}
</style>
</head>
<body>
<table>
  <tr>
    <td><input type="text" value="1"></td><td><input type="text" value="2"></td><td><input type="text" value="3"></td>
  </tr>
  <tr>
    <td><input type="text" value="1"></td><td><input type="text" value="2"></td><td><input type="text" value="3"></td>
  </tr>
</table>
</body>
</html>

02/08/2012, 09h17
benf35
J'ai seulement appliqué ton css
Code:

1 2 3 border:0; height:2.0em; line-height:2.0em;
sur mes input et çà a donné plus ou moins le rendu voulu!

En fait mes td étaient de taille différente car la première colonne ne contenait pas de input, mais du texte.

Merci beaucoup!