28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je ne réussis pas à fixer la largeur de mes colonnes dans le tableau ci-après. Cela a pour conséquence, qu'en fonction de la largeur des 3 caractères de la première ligne. L'image est plus ou moins tronqué


<table cellpadding='1' cellspacing='0' border='1' width='80%'>
   <tr bgcolor='#dedede'>
	<td class='cal-center' title='01-12-2010 / semaine 48'>mer <br>1</td>
	<td class='cal-center' title='02-12-2010 / semaine 48'>jeu <br>2</td>
	<td class='cal-center' title='03-12-2010 / semaine 48'>ven <br>3</td>
   </tr>
   <tr align='center'>
	<td class='cal-saisie rtt_am'  title="a - 01/12/2010" ></td>
	<td class='cal-saisie rtt_am'  title="a - 02/12/2010" ></td>
	<td class='cal-saisie rtt_am'  title="a - 03/12/2010" ></td>
   </tr>


td.cal-saisie{
	border-bottom: 1px #5B8BAB solid; 
	border-right: 1px #5B8BAB solid; 
	height: 16px ; 
	width: 35pt;
}
.rtt_am {
	background-image:url('http://www.gestion-personnel.org/img/cal/rtt_am.gif');
}


J'ai fait varier le height et le width, mais j'ai toujours mon soucis. Voyez vous quelques choses de choquant ?

Merci dans tous les cas
Modifié par renard9 (15 Dec 2010 - 09:17)
Bonjour,

Pour forcer une largeur à vos cellules il faut supprimer le width='80%' de la balise <table> sinon vous ne pourrez jamais maitriser correctement la largeur de vos cellules qui est ici déterminée en pt (valeur fixe). Je pense que dans votre cas des dimensions en pixel serait mieux adaptées si vous souhaitez avoir une taille correspondant à votre image de fond.
Modifié par Spacedementia (12 Dec 2010 - 00:23)
Merci

Effectivement, je n'avais pas pensé que le 80% pouvait jouer sur la largeur. Je vais essayer sans.

Merci dans tous les cas
Autre information utile: les navigateurs utilisent un algorithme complexe pour le calcul des largeurs des divers éléments d'un tableau. On peut aussi choisir de spécifier des largeurs précises et demander au navigateur de les respecter strictement en utilisant table-layout:fixed en CSS.

http://www.w3.org/TR/CSS2/tables.html#propdef-table-layout
Modifié par Florent V. (12 Dec 2010 - 13:22)
Effectivement, la cause était bien le 80%. Merci Spacedementia.

Merci aussi Florent pour ton approfondissement du sujet. J'ai l'impression que ton information permet surtout d'optimiser coté client, l'affichage du tableau. Je n'en suis pas à ce niveau. Je développe juste pour le plaisir une petite application pour mon service de gestion des congés (même si, j'ai essayé de la rendre générique pour que d'autres services/ entreprises puissent l'utiliser).