Discussion :

[airben]

Bonjour ,

Comment reduire l'éspace qu'il y a entre les lignes d'un tableau.Pour vous donner un exemple je souhaite un espacement comme celui d'un tableau excel.
Merci pour votre aide.

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
<table width="100%">
<tr>	
<td>				  
<label  for="numtel">num tel *</label>
</td>		 
<td>		 
<input type="text" name="numtel" id="numtel" size="10" maxlength="10" value="" />						 
</td>
</tr> 
<!--
au niveau de l'affichage dans internet explorer, c'est cette espace que je souhaite reduire 
-->
<tr>
 <td>
<label  for="nom"> Nom *</label>
</td> 
 <td>
<input type="text" name="nom" id="nom" size="5" maxlength="5" value="" />	
</td>
</tr>				   
<tr>
<td>
<label  for="prenom">prenom *</label>
</td>   
<td> 
<input type="text" name="prenom" id="prenom" size="16" maxlength="16" value="" />
</td>				
</tr> 						 
</table>

[slack457]

Bonjour,

le problème c'est que les bordure que tu vois ne sont pas celle du tableau, mais l'encadré des input de type texte.

L'idée serait peut-être de rendre invisible l'encadré des inputs, et afficher les bordures de la 2ème colonne du tableau.

essai peut-être quelque chose dans ce genre :

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
<!-- code html -->
 
<table class="tab">
<tr>	
   <td>				  
      <label  for="numtel"> num tel * </label>
   </td>		 
   <td class="encadre">	 
      <input type="text" name="numtel" id="numtel" size="20" maxlength="10" value="" />						 
   </td>
</tr> 
<tr>
   <td>
      <label  for="nom"> Nom * </label>
   </td> 
   <td class="encadre">
      <input type="text" name="nom" id="nom" size="20" maxlength="20" value="" />	
   </td>
</tr>				   
<tr>
   <td>
      <label  for="prenom"> prenom * </label>
   </td>   
   <td class="encadre">
      <input type="text" name="prenom" id="prenom" size="20" maxlength="20" value="" />
   </td>				
</tr> 						 
</table>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- code CSS -->
 
.tab
{
   width: 100%;
   border-collapse: collapse;
}
 
.encadre
{
   width: 200px;
   border: 1px solid blue;
}

Pour le "width" de "encadre", il faudra probablement que tu ajuste le nombre de pixels (j'ai mis 200 au hasard là).


Aussi, si je peux te donner 2 bon conseils, ce serait de respecter l'indentation, et la séparation entre le contenu (HTML) et la forme (CSS). Cela peut paraître fastidieux mais c'est très important.


Et hélas, je ne sais pas comment cacher l'encadré des input... Si tu sais comment faire, dis le nous, ça m'intéresse