28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de dimensionnement d'un tableau

Bonjour,

Voici le code HTML de mon tableau:

<div id="tableau_timbres">
	<table border="1">
	  <tr>
		<th class="first_column">Timbre</th>
		<th>Sujet</th>
		<th>Code AM</th>
		<th>Code WNS</th>
		<th>Valeur</th>
		<th>Dentelure (mm)</th>
		<th>Dimensions<span class="details_dim"> (mm; hauteur x largeur)</span></th>
		<th>Code TC</th>
		<th></th>
	  </tr>
	  <tr>
		<td class="first_column">
		  <img class="img_timbre" src="images/timbre1.jpg" />
		</td>
		<td><input type="text" name="sujet" placeholder="Timbre n°1"></td>
		<td><input type="text" name="code_am" size="10"></td>
		<td><input type="text" name="code_wns" size="8"></td>
		<td><input type="text" name="code_val" placeholder="0.0" size="2"></td>
		<td><input type="text" name="dentelure" size="3"></td>
		<td>
		  <input type="text" name="hauteur" size="2">
		  <span>x</span>
		  <input type="text" name="largeur" size="2">
		</td>
		<td><input type="text" name="code_tc" size="10"></td>
		<td><img class="del_timbre" src="images/red_cross.png" />
	  </tr>
	  <tr>
		<td><div class="ajout_timbre">Déposer votre image de timbre ici</div></td>
		<td><input type="text" name="sujet"></td>
		<td><input type="text" name="code_am" size="10"></td>
		<td><input type="text" name="code_wns" size="8"></td>
		<td><input type="text" name="code_val" placeholder="0.0" size="2"></td>
		<td><input type="text" name="dentelure" size="3"></td>
		<td>
		  <input type="text" name="hauteur" size="2">
		  <span>x</span>
		  <input type="text" name="largeur" size="2">
		</td>
		<td><input type="text" name="code_tc" size="10"></td>
		<td><img class="del_timbre" src="images/red_cross.png" />
	  </tr>
	</table>
  </div>


Et voici le code CSS:

#tableau_timbres
{
	width: 100%;
	clear: both;
	padding-top: 10px;
}

#tableau_timbres table th.first_column
{
	width: 20%;
}

#tableau_timbres table td 
{
	text-align: center;
}

#tableau_timbres table td img.img_timbre
{
	width: 30%;
	margin-top: 5px;
	margin-left: 10px;
}

#tableau_timbres .ajout_timbre
{
	border: 2px dashed white;
	text-align: center;
	margin-left: 30px;
	margin-right: 30px;
	height: 75px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding-top: 20px;
}

#tableau_timbres th .details_dim
{
	font-size: 12px;
}

Voici à quoi ressemble mon tableau:

http://www.imagup.com/data/1152451259.html

Et voici à quoi ressemble mon tableau lorsque je redimensionne ma fenêtre:

http://www.imagup.com/data/1152451299.html

Comment régler ce problème?

Merci.
Modifié par Yuuko (23 May 2012 - 17:07)
Bonjour,

C'est normal. Ton tableau contient des éléments qui ont une taille fixe, il ne peux pas réduire les cellules.
Laurie-Anne a écrit :
Bonjour,

C'est normal. Ton tableau contient des éléments qui ont une taille fixe, il ne peux pas réduire les cellules.


J'ai essayé en mettant des pourcentages dans le css, ça ne marche pas non plus...
Tes éléments de formulaire une une taille "hard codée" dans le HTML.

Je répète, c'est tout à fait normal.
J'ai retiré les "size=" dans mon tableau, j'ai mis à la place des "td width=%":

<table border="1">
	  <tr>
		<th width="27%">Timbre</th>
		<th width="30%">Sujet</th>
		<th width="15%">Code AM</th>
		<th width="5%">Code WNS</th>
		<th width="2%">Valeur</th>
		<th width="2%">Dentelure (mm)</th>
		<th width="2%">Dimensions<span class="details_dim"> (mm; hauteur x largeur)</span></th>
		<th width="15%">Code TC</th>
		<th width="2%"></th>
	  </tr>
	  <tr>
		<td width="27%">
		  <img class="img_timbre" src="images/timbre1.jpg" alt="Timbre" />
		</td>
		<td width="30%"><input type="text" name="sujet" placeholder="Timbre n°1"></td>
		<td width="15%"><input type="text" name="code_am"></td>
		<td width="5%"><input type="text" name="code_wns"></td>
		<td width="2%"><input type="text" name="code_val" placeholder="0.0"></td>
		<td width="2%"><input type="text" name="dentelure"></td>
		<td width="2%">
		  <input type="text" name="hauteur">
		  <span>x</span>
		  <input type="text" name="largeur">
		</td>
		<td width="15%"><input type="text" name="code_tc"></td>
		<td width="2%"><img class="del_timbre" src="images/red_cross.png" alt=""/>
	  </tr>
	  <tr>
		<td width="27%"><div class="ajout_timbre">Déposer votre image de timbre ici</div></td>
		<td width="30%"><input type="text" name="sujet"></td>
		<td width="15%"><input type="text" name="code_am"></td>
		<td width="5%"><input type="text" name="code_wns"></td>
		<td width="2%"><input type="text" name="code_val" placeholder="0.0"></td>
		<td width="2%"><input type="text" name="dentelure"></td>
		<td width="2%">
		  <input type="text" name="hauteur">
		  <span>x</span>
		  <input type="text" name="largeur">
		</td width="15%">
		<td><input type="text" name="code_tc"></td>
		<td width="2%"><img class="del_timbre" src="images/red_cross.png" alt=""/>
	  </tr>
	</table>


Le total de mes colonnes fait bien 100%, et pourtant, le tableau dépasse toujours de ma page! (j'ai bien mis table width=100%)

De plus, par exemple, à la première colonne, que je mette 27% ou 15%, la taille de ma colonne ne change pas!
Comment ça se fait?
Modifié par Yuuko (25 May 2012 - 11:17)
J'ai réussi en mettant "table-layout:fixed", des width en % sur mes td et sur mes input!
Sujet clos
Aller à