Genre de padding dans un <td>

Bonjour à tous !

Voilà aujourd'hui j'ai un petit soucis avec un tableau.
Je fais un calendrier de disponibilité.

J'ai donc dans chacun de mes td deux span qui "divise la case en deux en diagonale" (me tuer pas !).
En vrai, ces deux span se superpose et appelle des .png qui eux sont divisé en leur diagonale.

Le soucis, c'est que j'ai un décalage à l'intérieur de mes <td>

Voici un aperçu :



Ainsi que mon code CSS et HTML Généré :

table{width:224px;float:left;margin:0;margin-right:10px;padding:0;border-spacing:0px;}
table tr{height:30px;}
table tr td{height:30px; width:30px;}
.span_am{position:absolute; width:30px;height:30px; margin:0; padding:0;}
.span_pm{position:absolute; width:30px;height:30px; margin:0; padding:0;}

<table cellpadding="0" cellspacing="0">
    	<tbody><tr>
			<td colspan="7">September 2011</td>
        </tr>
        <tr>
					<td class="fond_dispo_mois">Lu</td>
						<td class="fond_dispo_mois">Ma</td>
						<td class="fond_dispo_mois">Me</td>
						<td class="fond_dispo_mois">Je</td>
						<td class="fond_dispo_mois">Ve</td>
						<td class="fond_dispo_mois">Sa</td>
						<td class="fond_dispo_mois">Di</td>
			        </tr>
        <tr>
        	                <td colspan="3">&nbsp;</td>
                                <td id="32" class="fond_dispo" rel="1">
                    <span class="span_am">&nbsp;</span>
                    <span class="span_pm">&nbsp;</span>
                    <input type="hidden" name="disponibilite[2011][9][1]" value="1">
                    <span class="ajout">1</span>
									</td>
                                <td id="33" class="fond_dispo" rel="2">
                    <span class="span_am">&nbsp;</span>
                    <span class="span_pm">&nbsp;</span>
                    <input type="hidden" name="disponibilite[2011][9][2]" value="1">
                    <span class="ajout">2</span>
									</td>
                                <td id="34" class="fond_dispo ferie" rel="3">
                    <span class="span_am">&nbsp;</span>
                    <span class="span_pm">&nbsp;</span>
                    <input type="hidden" name="disponibilite[2011][9][3]" value="1">
                    <span class="ajout">3</span>
									</td>
                                <td id="35" class="fond_dispo ferie" rel="4">
                    <span class="span_am">&nbsp;</span>
                    <span class="span_pm">&nbsp;</span>
                    <input type="hidden" name="disponibilite[2011][9][4]" value="1">
                    <span class="ajout">4</span>
									</td>
                </tr>                <tr><td id="36" class="fond_dispo" rel="5">
                    <span class="span_am">&nbsp;</span>
                    <span class="span_pm">&nbsp;</span>
                    <input type="hidden" name="disponibilite[2011][9][5]" value="1">
                    <span class="ajout">5</span>
                                    </td>
                                <td id="37" class="fond_dispo" rel="6">
                    <span class="span_am">&nbsp;</span>
                    <span class="span_pm etat_2_pm">&nbsp;</span>
                    <input type="hidden" name="disponibilite[2011][9][6]" value="2">
                    <span class="ajout">6</span>
                                    </td>
                                <td id="38" class="fond_dispo" rel="7">
                    <span class="span_am etat_2_am">&nbsp;</span>
                    <span class="span_pm">&nbsp;</span>
                    <input type="hidden" name="disponibilite[2011][9][7]" value="1">
                    <span class="ajout">7</span>
                                    </td>
                                <td id="39" class="fond_dispo" rel="8">
                    <span class="span_am">&nbsp;</span>
                    <span class="span_pm">&nbsp;</span>
                    <input type="hidden" name="disponibilite[2011][9][8]" value="1">
                    <span class="ajout">8</span>
                                    </td>
                                <td id="40" class="fond_dispo" rel="9">
                    <span class="span_am">&nbsp;</span>
                    <span class="span_pm">&nbsp;</span>
                    <input type="hidden" name="disponibilite[2011][9][9]" value="1">
                    <span class="ajout">9</span>
                                    </td>
                                <td id="41" class="fond_dispo ferie" rel="10">
                    <span class="span_am">&nbsp;</span>
                    <span class="span_pm">&nbsp;</span>
                    <input type="hidden" name="disponibilite[2011][9][10]" value="1">
                    <span class="ajout">10</span>
                                    </td>
                                <td id="42" class="fond_dispo ferie" rel="11">
                    <span class="span_am">&nbsp;</span>
                    <span class="span_pm">&nbsp;</span>
                    <input type="hidden" name="disponibilite[2011][9][11]" value="1">
                    <span class="ajout">11</span>
                                    </td>
                </tr>                <tr><td id="43" class="fond_dispo" rel="12">
                    <span class="span_am">&nbsp;</span>
                    <span class="span_pm">&nbsp;</span>
                    <input type="hidden" name="disponibilite[2011][9][12]" value="1">
                    <span class="ajout">12</span>
                                    </td>
                                <td id="44" class="fond_dispo" rel="13">
                    <span class="span_am">&nbsp;</span>
                    <span class="span_pm">&nbsp;</span>
                    <input type="hidden" name="disponibilite[2011][9][13]" value="1">
                    <span class="ajout">13</span>
                                    </td>
                                <td id="45" class="fond_dispo" rel="14">
                    <span class="span_am">&nbsp;</span>
                    <span class="span_pm etat_1_pm">&nbsp;</span>
                    <input type="hidden" name="disponibilite[2011][9][14]" value="1">
                    <span class="ajout">14</span>
                                    </td>
                                <td id="46" class="fond_dispo" rel="15">
                    <span class="span_am etat_1_am">&nbsp;</span>
                    <span class="span_pm etat_2_pm">&nbsp;</span>
                    <input type="hidden" name="disponibilite[2011][9][15]" value="2">
                    <span class="ajout">15</span>
                                    </td>
                                <td id="47" class="fond_dispo" rel="16">
                    <span class="span_am etat_2_am">&nbsp;</span>
                    <span class="span_pm etat_2_pm">&nbsp;</span>
                    <input type="hidden" name="disponibilite[2011][9][16]" value="2">
                    <span class="ajout">16</span>
                                    </td>
                                <td id="48" class="fond_dispo ferie" rel="17">
                    <span class="span_am etat_2_am">&nbsp;</span>
                    <span class="span_pm etat_2_pm">&nbsp;</span>
                    <input type="hidden" name="disponibilite[2011][9][17]" value="2">
                    <span class="ajout">17</span>
                                    </td>
                                <td id="49" class="fond_dispo ferie" rel="18">
                    <span class="span_am etat_2_am">&nbsp;</span>
                    <span class="span_pm">&nbsp;</span>
                    <input type="hidden" name="disponibilite[2011][9][18]" value="1">
                    <span class="ajout">18</span>
                                    </td>
                </tr>                <tr><td id="50" class="fond_dispo" rel="19">
                    <span class="span_am">&nbsp;</span>
                    <span class="span_pm">&nbsp;</span>
                    <input type="hidden" name="disponibilite[2011][9][19]" value="1">
                    <span class="ajout">19</span>
                                    </td>
                                <td id="51" class="fond_dispo" rel="20">
                    <span class="span_am">&nbsp;</span>
                    <span class="span_pm">&nbsp;</span>
                    <input type="hidden" name="disponibilite[2011][9][20]" value="1">
                    <span class="ajout">20</span>
                                    </td>
                                <td id="52" class="fond_dispo" rel="21">
                    <span class="span_am">&nbsp;</span>
                    <span class="span_pm">&nbsp;</span>
                    <input type="hidden" name="disponibilite[2011][9][21]" value="1">
                    <span class="ajout">21</span>
                                    </td>
                                <td id="53" class="fond_dispo" rel="22">
                    <span class="span_am">&nbsp;</span>
                    <span class="span_pm">&nbsp;</span>
                    <input type="hidden" name="disponibilite[2011][9][22]" value="1">
                    <span class="ajout">22</span>
                                    </td>
                                <td id="54" class="fond_dispo" rel="23">
                    <span class="span_am">&nbsp;</span>
                    <span class="span_pm">&nbsp;</span>
                    <input type="hidden" name="disponibilite[2011][9][23]" value="1">
                    <span class="ajout">23</span>
                                    </td>
                                <td id="55" class="fond_dispo ferie" rel="24">
                    <span class="span_am">&nbsp;</span>
                    <span class="span_pm">&nbsp;</span>
                    <input type="hidden" name="disponibilite[2011][9][24]" value="1">
                    <span class="ajout">24</span>
                                    </td>
                                <td id="56" class="fond_dispo ferie" rel="25">
                    <span class="span_am">&nbsp;</span>
                    <span class="span_pm">&nbsp;</span>
                    <input type="hidden" name="disponibilite[2011][9][25]" value="1">
                    <span class="ajout">25</span>
                                    </td>
                </tr>                <tr><td id="57" class="fond_dispo" rel="26">
                    <span class="span_am">&nbsp;</span>
                    <span class="span_pm">&nbsp;</span>
                    <input type="hidden" name="disponibilite[2011][9][26]" value="1">
                    <span class="ajout">26</span>
                                    </td>
                                <td id="58" class="fond_dispo" rel="27">
                    <span class="span_am">&nbsp;</span>
                    <span class="span_pm">&nbsp;</span>
                    <input type="hidden" name="disponibilite[2011][9][27]" value="1">
                    <span class="ajout">27</span>
                                    </td>
                                <td id="59" class="fond_dispo" rel="28">
                    <span class="span_am">&nbsp;</span>
                    <span class="span_pm">&nbsp;</span>
                    <input type="hidden" name="disponibilite[2011][9][28]" value="1">
                    <span class="ajout">28</span>
                                    </td>
                                <td id="60" class="fond_dispo" rel="29">
                    <span class="span_am">&nbsp;</span>
                    <span class="span_pm">&nbsp;</span>
                    <input type="hidden" name="disponibilite[2011][9][29]" value="1">
                    <span class="ajout">29</span>
                                    </td>
                                <td id="61" class="fond_dispo" rel="30">
                    <span class="span_am">&nbsp;</span>
                    <span class="span_pm">&nbsp;</span>
                    <input type="hidden" name="disponibilite[2011][9][30]" value="1">
                    <span class="ajout">30</span>
                                    </td>
                        
	</tr></tbody></table>

Modifié par Nowis (29 Aug 2011 - 14:51)

Bonjour,

Ton titre parle d'un «genre de padding» dans les éléments TD. Tu as pensé à mettre le padding des TD à zéro, justement?

Bonjour,

Oui evidemment j'ai tout essayé...
Mais comme je n'ai pas trouvé, je suis retourné joué avec mon joli <div>
Et ça marche parfaitement sans avoir modifié le CSS.

Par contre, ça marche bien sous Chrome, mais pas sous Firefox (j'ose pas encore ouvrir IE...)



Si j'enlève mon position absolute sur le texte qui permettait d'écrire les numéro (span.ajout) ça arrange un peu les choses, mais pas tout...

Si quelqu'un a une idée...

Le positionnement absolu ça marche bien quand tu peux positionne le parent ou un conteneur en relatif, et ainsi utiliser des coordonnées pour placer clairement ton élément en absolu (par exemple avec un top:0;left:0;). Le problème, c'est que tu ne peux pas utiliser de position:relative sur un TD (ça sera tout simplement ignoré).

À la rigueur, si tu gardes du padding, tu peux déclarer un padding bien précis (par exemple padding: 5px 2px;), et décaler tes éléments graphiques avec des marges négatives (margin: -5px 0 0 -2px).

Bonjour,

Je suis repassé en <div> donc logiquement je peux positionner en absolute et relatif.

Voici la structure d'un carré (d'un jour)

<div id="saison_<?php echo $id_td; ?>" class="fond_dispo">
    <span class="ajout"><?php echo $j ?></span>
    <span class="span_am saison_<?php echo $id_saison_hier ?>_am">&nbsp;</span>
    <span class="span_pm saison_<?php echo $id_saison ?>_pm">&nbsp;</span>
</div>

Mon CSS :

.fond_dispo{position: relative; height:30px; width:30px; padding:0; margin:0; float:left;border:1px solid black; text-align:center; line-height:18px;}
.span_am{position:absolute; width:30px;height:30px; margin:0; padding:0;}
.span_pm{position:absolute; width:30px;height:30px; margin:0; padding:0;}

Aucun soucis sous chrome.
Sous IE et Firefox, des décalages (cf. photo du 3ème post).