input dans un tableau

**munos46** · 19/05/2009, 00h26

bonjour je souhaite créer un tableau d'input. Mon premier problème est que mon tableau est trop grand pour la page.

Ensuite je souhaiterai que mes inputs type='text'
occupent tout l'espace possible dans une cellule d'un tableau
ce serait super que quelqu'un puisse me venir en aide. Merci d'avance.

css du tableau :

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
/* Style des lignes de séparation */
.table-separateur {
  font-size : 12px;
  font-family : Verdana, arial, helvetica, sans-serif;
  color : #333333;
  background-color : #d6d3ce;
}
 
/* Style du titre du tableau */
.table-titre {
   font-size : 12px;
   font-family : Verdana, arial, helvetica, sans-serif;
  color : #eeeeee;
  text-align : center;
  font-weight : bold;
  background-color : #666666;
}
 
/* Style des en-têtes du tableau */
.table-entete {
  font-size : 12px;
  font-family : Verdana, arial, helvetica, sans-serif;
  color : #333333;
  background-color : #a7ada7;
}
 
/* Style des en-têtes du tableau (centré) */
.table-entete-centre {
  font-size : 12px;
   font-family : Verdana, arial, helvetica, sans-serif;
   color : #333333;
   text-align : center;
  background-color : #a7ada7;
}
 
/* Style des en-têtes du tableau (droite) */
.table-entete-droit {
  font-size : 12px;
   font-family : Verdana, arial, helvetica, sans-serif;
   color : #333333;
  text-align : right;
  background-color : #a7ada7;
}
 
/* Style 1 des cellules */
.table-ligne1 {
  font-size : 12px;
  font-family : Verdana, arial, helvetica, sans-serif;
  color : #333333;
  background-color : #c6c3bd;
}
 
/* Style 2 des cellules */
.table-ligne2 {
  font-size : 12px;
  font-family : Verdana, arial, helvetica, sans-serif;
  color : #333333;
  background-color : #cccccc;
}
 
/* Style 1 des cellules (centré) */
.table-ligne1-centre {
  font-size : 12px;
   font-family : Verdana, arial, helvetica, sans-serif;
  color : #333333;
  text-align : center;
  background-color : #c6c3bd;
}
 
/* Style 2 des cellules (centré) */
.table-ligne2-centre {
  font-size : 12px;
  font-family : Verdana, arial, helvetica, sans-serif;
  color : #333333;
  text-align : center;
  background-color : #cccccc;
}
 
/* Style 1 des cellules (droite) */
.table-ligne1-droit {
  font-size : 12px;
  font-family : Verdana, arial, helvetica, sans-serif;
  color : #333333;
  text-align : right;
  background-color : #c6c3bd;
}
 
/* Style 2 des cellules (droite) */
.table-ligne2-droit {
  font-size : 12px;
  font-family : Verdana, arial, helvetica, sans-serif;
  color : #333333;
  text-align : right;
  background-color : #cccccc;
}

code du tableau :

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
<table id="grilleSaisie" width="10%" border="0" cellspacing="1" cellpadding="2">
<tr><td class="table-titre" colspan="4">Saisie des écritures</td></tr>
<tr>
  <td width="10" class="table-entete">Compte</td>
  <td width="10" class="table-entete">Pdt / Affect</td>
  <td width="10" class="table-entete">Nature</td>
  <td width="10" class="table-entete">Débit</td>
  <td width="10" class="table-entete">Crédit</td>
  <td width="10" class="table-entete">TVA</td>
  <td width="10" class="table-entete">Mtt TVA</td>
  <td width="10" class="table-entete">Quantité</td>
  <td width="10" class="table-entete-droit">Nombre</td>
</tr>
 
<tr><td width="10"  class="table-ligne"><input type="text" id="compte"></td>
														  <td width="10"  class="table-ligne"><input type="text" id="produit"></td>
														  <td width="10"  class="table-ligne"><input type="text" id="nature"></td>
														  <td width="10"  class="table-ligne"><input type="text" id="debit"></td>
														  <td width="10"  class="table-ligne"><input type="text" id="gredit"></td>
														  <td width="10"  class="table-ligne"><input type="text" id="tva"></td>
														  <td width="10"  class="table-ligne"><input type="text" id="mttTVA"></td></tr>
														  <td width="10"  class="table-ligne"><input type="text" id="quantite"></td>
														  <td width="10"  class="table-ligne"><input type="text" id="nombre"></td></tr>
 
</table>

**Macmillenium** · 19/05/2009, 09h12

Bonjour,

Il suffit de renseigner un width:100% aux inputs.

**sibile** · 26/05/2009, 01h21

On ne peut plus utiliser de tels tableaux, ce n' est vraiment plus possible selon les normes w3c.
Puisque tu maîtrises les css alors il faut créer ta table avec des divs.

**Poulpynette** · 26/05/2009, 09h39

Envoyé par sibile

On ne peut plus utiliser de tels tableaux, ce n' est vraiment plus possible selon les normes w3c.
Puisque tu maîtrises les css alors il faut créer ta table avec des divs.

Certes sibile, mais on ne peut pas non plus imposer les normes w3c. Seulement suggérer fortement

En revanche munos46, tant qu'à coder avec des tables, autant le faire correctement : attention à mettre le même nombre de cellules dans chaque ligne de ta table !!!