Ajuster la taille d'un INPUT

**benf35** · 01/08/2012, 15h24

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!

**NoSmoking** · 01/08/2012, 15h32

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

**benf35** · 01/08/2012, 16h05

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.

**NoSmoking** · 01/08/2012, 22h13

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 :

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

**benf35** · 02/08/2012, 09h17

J'ai seulement appliqué ton css

Code :

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

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!

Ajuster la taille d'un INPUT

CSS

Vue hybride

Discussions similaires

Partager

Partager