28221 sujets

CSS et mise en forme, CSS3

[tjrs PAS résolu] Priorités pour le style des bordures d'un tableau

Bonjour,

Je cherche à savoir comment contourner le problème des conflits de bordure ne sont (à mon avis) pas résolus par IE comme expliqué ici : http://www.yoyodesign.org/doc/w3c/css2/tables.html#border-conflict-resolution (lire surtout la règle n°4)

En effet, voici un exemple de tableau (http://www.pullybasket.ch/test.html) à visualiser avec IE et Mozilla... vous verrez la différence : sur mozilla, les bordures latérales de la cellule du milieu sont blanches (la priorité est sur la cellule) alors que sur IE, c'est toujours le style de la bordure du tableau qui "prime".

Merci beaucoup pour votre aide !

PS: en fait, je cherche simplement à donner l'impression d'une séparation au millieu d'un tableau (sans pour autant terminer un tableau et en recommencer un autre) donc si vous voyez une autre solution pour arriver au même effet, ça va aussi (en fait, c'est pour appliquer à cette page : http://www.pullybasket.ch/matches.php?tout=true, qui est comme je le désire avec Mozilla mais pas avec IE)
Modifié le 03 Nov 2004 - 22:00
Salut,
moi j'utiliserai juste une embrication de tableaux:


<table width="100%" border="0" cellpadding="1" cellspacing="1">
	<tr>
		<td>1<sup>ère</sup> journée</td>
	</tr>
	<tr>
		<td>
			<table border="0" width="100%" cellpadding="1" cellspacing="1" bgcolor="#CC0000">
				<tr>
					<td><table width="100%" border="0" cellpadding="5" cellspacing="0" bgcolor="#993366">
							<tr bgcolor="#FFFFFF">
								<td width="91" nowrap="nowrap">SA 9 oct 2004</td>
								<td width="35" nowrap="nowrap">17:30</td>
								<td width="52" nowrap="nowrap">Fribourg</td>
								<td width="6" nowrap="nowrap">-</td>
								<td width="71" nowrap="nowrap">Boncourt</td>
								<td width="68" nowrap="nowrap">Ste-Croix</td>
								<td width="59" nowrap="nowrap">92 - 110</td>
								<td width="9" nowrap="nowrap">&nbsp;</td>
							</tr>
							<tr bgcolor="#FFFF99">
								<td nowrap="nowrap">SA 9 oct 2004</td>
								<td nowrap="nowrap">17:30</td>
								<td nowrap="nowrap">Fribourg</td>
								<td nowrap="nowrap">-</td>
								<td nowrap="nowrap">Boncourt</td>
								<td nowrap="nowrap">Ste-Croix</td>
								<td nowrap="nowrap">92 - 110</td>
								<td nowrap="nowrap">&nbsp;</td>
							</tr>
							<tr bgcolor="#FFFFFF">
								<td nowrap="nowrap">SA 9 oct 2004</td>
								<td nowrap="nowrap">17:30</td>
								<td nowrap="nowrap">Fribourg</td>
								<td nowrap="nowrap">-</td>
								<td nowrap="nowrap">Boncourt</td>
								<td nowrap="nowrap">Ste-Croix</td>
								<td nowrap="nowrap">92 - 110</td>
								<td nowrap="nowrap">&nbsp;</td>
							</tr>
							<tr bgcolor="#FFFF99">
								<td nowrap="nowrap">SA 9 oct 2004</td>
								<td nowrap="nowrap">17:30</td>
								<td nowrap="nowrap">Fribourg</td>
								<td nowrap="nowrap">-</td>
								<td nowrap="nowrap">Boncourt</td>
								<td nowrap="nowrap">Ste-Croix</td>
								<td nowrap="nowrap">92 - 110</td>
								<td nowrap="nowrap">&nbsp;</td>
							</tr>
							<tr bgcolor="#FFFFFF">
								<td nowrap="nowrap">SA 9 oct 2004</td>
								<td nowrap="nowrap">17:30</td>
								<td nowrap="nowrap">Fribourg</td>
								<td nowrap="nowrap">-</td>
								<td nowrap="nowrap">Boncourt</td>
								<td nowrap="nowrap">Ste-Croix</td>
								<td nowrap="nowrap">92 - 110</td>
								<td nowrap="nowrap">&nbsp;</td>
							</tr>
							<tr bgcolor="#FFFF99">
								<td nowrap="nowrap">SA 9 oct 2004</td>
								<td nowrap="nowrap">17:30</td>
								<td nowrap="nowrap">Fribourg</td>
								<td nowrap="nowrap">-</td>
								<td nowrap="nowrap">Boncourt</td>
								<td nowrap="nowrap">Ste-Croix</td>
								<td nowrap="nowrap">92 - 110</td>
								<td nowrap="nowrap">&nbsp;</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td>2<sup>ème</sup> journée</td>
	</tr>
	<tr>
		<td>
			<table width="100%" border="0" cellpadding="1" cellspacing="1" bgcolor="#CC0000">
				<tr>
					<td><table width="100%" border="0" cellpadding="5" cellspacing="0" bgcolor="#993366">
							<tr bgcolor="#FFFFFF">
								<td width="91" nowrap="nowrap">SA 9 oct 2004</td>
								<td width="35" nowrap="nowrap">17:30</td>
								<td width="52" nowrap="nowrap">Fribourg</td>
								<td width="6" nowrap="nowrap">-</td>
								<td width="71" nowrap="nowrap">Boncourt</td>
								<td width="68" nowrap="nowrap">Ste-Croix</td>
								<td width="59" nowrap="nowrap">92 - 110</td>
								<td width="9" nowrap="nowrap">&nbsp;</td>
							</tr>
							<tr bgcolor="#FFFF99">
								<td nowrap="nowrap">SA 9 oct 2004</td>
								<td nowrap="nowrap">17:30</td>
								<td nowrap="nowrap">Fribourg</td>
								<td nowrap="nowrap">-</td>
								<td nowrap="nowrap">Boncourt</td>
								<td nowrap="nowrap">Ste-Croix</td>
								<td nowrap="nowrap">92 - 110</td>
								<td nowrap="nowrap">&nbsp;</td>
							</tr>
							<tr bgcolor="#FFFFFF">
								<td nowrap="nowrap">SA 9 oct 2004</td>
								<td nowrap="nowrap">17:30</td>
								<td nowrap="nowrap">Fribourg</td>
								<td nowrap="nowrap">-</td>
								<td nowrap="nowrap">Boncourt</td>
								<td nowrap="nowrap">Ste-Croix</td>
								<td nowrap="nowrap">92 - 110</td>
								<td nowrap="nowrap">&nbsp;</td>
							</tr>
							<tr bgcolor="#FFFF99">
								<td nowrap="nowrap">SA 9 oct 2004</td>
								<td nowrap="nowrap">17:30</td>
								<td nowrap="nowrap">Fribourg</td>
								<td nowrap="nowrap">-</td>
								<td nowrap="nowrap">Boncourt</td>
								<td nowrap="nowrap">Ste-Croix</td>
								<td nowrap="nowrap">92 - 110</td>
								<td nowrap="nowrap">&nbsp;</td>
							</tr>
							<tr bgcolor="#FFFFFF">
								<td nowrap="nowrap">SA 9 oct 2004</td>
								<td nowrap="nowrap">17:30</td>
								<td nowrap="nowrap">Fribourg</td>
								<td nowrap="nowrap">-</td>
								<td nowrap="nowrap">Boncourt</td>
								<td nowrap="nowrap">Ste-Croix</td>
								<td nowrap="nowrap">92 - 110</td>
								<td nowrap="nowrap">&nbsp;</td>
							</tr>
							<tr bgcolor="#FFFF99">
								<td nowrap="nowrap">SA 9 oct 2004</td>
								<td nowrap="nowrap">17:30</td>
								<td nowrap="nowrap">Fribourg</td>
								<td nowrap="nowrap">-</td>
								<td nowrap="nowrap">Boncourt</td>
								<td nowrap="nowrap">Ste-Croix</td>
								<td nowrap="nowrap">92 - 110</td>
								<td nowrap="nowrap">&nbsp;</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td>3<sup>ème</sup> journée</td>
	</tr>
	<tr>
		<td><table width="100%" border="0" cellpadding="1" cellspacing="1" bgcolor="#CC0000">
				<tr>
					<td><table width="100%" border="0" cellpadding="5" cellspacing="0" bgcolor="#993366">
							<tr bgcolor="#FFFFFF">
								<td width="91" nowrap="nowrap">SA 9 oct 2004</td>
								<td width="35" nowrap="nowrap">17:30</td>
								<td width="52" nowrap="nowrap">Fribourg</td>
								<td width="6" nowrap="nowrap">-</td>
								<td width="71" nowrap="nowrap">Boncourt</td>
								<td width="68" nowrap="nowrap">Ste-Croix</td>
								<td width="59" nowrap="nowrap">92 - 110</td>
								<td width="9" nowrap="nowrap">&nbsp;</td>
							</tr>
							<tr bgcolor="#FFFF99">
								<td nowrap="nowrap">SA 9 oct 2004</td>
								<td nowrap="nowrap">17:30</td>
								<td nowrap="nowrap">Fribourg</td>
								<td nowrap="nowrap">-</td>
								<td nowrap="nowrap">Boncourt</td>
								<td nowrap="nowrap">Ste-Croix</td>
								<td nowrap="nowrap">92 - 110</td>
								<td nowrap="nowrap">&nbsp;</td>
							</tr>
							<tr bgcolor="#FFFFFF">
								<td nowrap="nowrap">SA 9 oct 2004</td>
								<td nowrap="nowrap">17:30</td>
								<td nowrap="nowrap">Fribourg</td>
								<td nowrap="nowrap">-</td>
								<td nowrap="nowrap">Boncourt</td>
								<td nowrap="nowrap">Ste-Croix</td>
								<td nowrap="nowrap">92 - 110</td>
								<td nowrap="nowrap">&nbsp;</td>
							</tr>
							<tr bgcolor="#FFFF99">
								<td nowrap="nowrap">SA 9 oct 2004</td>
								<td nowrap="nowrap">17:30</td>
								<td nowrap="nowrap">Fribourg</td>
								<td nowrap="nowrap">-</td>
								<td nowrap="nowrap">Boncourt</td>
								<td nowrap="nowrap">Ste-Croix</td>
								<td nowrap="nowrap">92 - 110</td>
								<td nowrap="nowrap">&nbsp;</td>
							</tr>
							<tr bgcolor="#FFFFFF">
								<td nowrap="nowrap">SA 9 oct 2004</td>
								<td nowrap="nowrap">17:30</td>
								<td nowrap="nowrap">Fribourg</td>
								<td nowrap="nowrap">-</td>
								<td nowrap="nowrap">Boncourt</td>
								<td nowrap="nowrap">Ste-Croix</td>
								<td nowrap="nowrap">92 - 110</td>
								<td nowrap="nowrap">&nbsp;</td>
							</tr>
							<tr bgcolor="#FFFF99">
								<td nowrap="nowrap">SA 9 oct 2004</td>
								<td nowrap="nowrap">17:30</td>
								<td nowrap="nowrap">Fribourg</td>
								<td nowrap="nowrap">-</td>
								<td nowrap="nowrap">Boncourt</td>
								<td nowrap="nowrap">Ste-Croix</td>
								<td nowrap="nowrap">92 - 110</td>
								<td nowrap="nowrap">&nbsp;</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</td>
	</tr>
</table>


Ca te permet de faire ton cadre en jouant sur les cellspacings.
De plus ta construction de tableau (j'magine que c'est dynamique en php) est pas plus compliquée (t'ajoute une cellule au premier, puis tu construit le tableau de la journée dedans.)

Et surtout le résultat est similaire dans tous les navigateurs!


En espérant que cela t'aidera...

@+
Modifié le 31 Oct 2004 - 11:20
Smiley idee Tu pourrais aussi utiliser les <th>:


<table border="0" width="100%" cellpadding="1" cellspacing="1" bgcolor="#CC0000">
    <tr>
        <td>
        <table width="100%" border="0" cellpadding="5" cellspacing="0" bgcolor="#FFFF66">
        <th>3<sup>ème</sup> journée</th>
            <tr bgcolor="#FFFFFF">
                <td width="91" nowrap="nowrap">SA 9 oct 2004</td>
                <td width="35" nowrap="nowrap">17:30</td>
                <td width="52" nowrap="nowrap">Fribourg</td>
                <td width="6" nowrap="nowrap">-</td>
                <td width="71" nowrap="nowrap">Boncourt</td>
                <td width="68" nowrap="nowrap">Ste-Croix</td>
                <td width="59" nowrap="nowrap">92 - 110</td>
                <td width="9" nowrap="nowrap">&nbsp;</td>
            </tr>
            <tr bgcolor="#FFFF99">
                <td nowrap="nowrap">SA 9 oct 2004</td>
                <td nowrap="nowrap">17:30</td>
                <td nowrap="nowrap">Fribourg</td>
                <td nowrap="nowrap">-</td>
                <td nowrap="nowrap">Boncourt</td>
                <td nowrap="nowrap">Ste-Croix</td>
                <td nowrap="nowrap">92 - 110</td>
                <td nowrap="nowrap">&nbsp;</td>
           </tr>
            <tr bgcolor="#FFFFFF">
                <td nowrap="nowrap">SA 9 oct 2004</td>
                <td nowrap="nowrap">17:30</td>
                <td nowrap="nowrap">Fribourg</td>
                <td nowrap="nowrap">-</td>
                <td nowrap="nowrap">Boncourt</td>
                <td nowrap="nowrap">Ste-Croix</td>
                <td nowrap="nowrap">92 - 110</td>
                <td nowrap="nowrap">&nbsp;</td>
            </tr>
            <tr bgcolor="#FFFF99">
                <td nowrap="nowrap">SA 9 oct 2004</td>
                <td nowrap="nowrap">17:30</td>
                <td nowrap="nowrap">Fribourg</td>
                <td nowrap="nowrap">-</td>
                <td nowrap="nowrap">Boncourt</td>
                <td nowrap="nowrap">Ste-Croix</td>
                <td nowrap="nowrap">92 - 110</td>
                <td nowrap="nowrap">&nbsp;</td>
            </tr>
            <tr bgcolor="#FFFFFF">
                <td nowrap="nowrap">SA 9 oct 2004</td>
                <td nowrap="nowrap">17:30</td>
                <td nowrap="nowrap">Fribourg</td>
                <td nowrap="nowrap">-</td>
                <td nowrap="nowrap">Boncourt</td>
                <td nowrap="nowrap">Ste-Croix</td>
                <td nowrap="nowrap">92 - 110</td>
                <td nowrap="nowrap">&nbsp;</td>
            </tr>
            <tr bgcolor="#FFFF99">
                <td nowrap="nowrap">SA 9 oct 2004</td>
                <td nowrap="nowrap">17:30</td>
                <td nowrap="nowrap">Fribourg</td>
                <td nowrap="nowrap">-</td>
                <td nowrap="nowrap">Boncourt</td>
                <td nowrap="nowrap">Ste-Croix</td>
                <td nowrap="nowrap">92 - 110</td>
                <td nowrap="nowrap">&nbsp;</td>
            </tr>
        </table>
    </td>
</tr>
</table>


Ca te donne un bonne alternative pour le titre d'une table....
Moi j'irais plus avec quelque chose dans le genre de : 


<table summary="">
 <caption><strong>Journée</strong></caption>
 <tbody>
  <tr class="odd"><td>SA 9 oct 2004</td><td>17:30</td><td>Fribourg</td><td>-</td><td>Boncourt</td>Ste-Croix<td></td><td>92 - 110</td><td>&nbsp;</td></tr>
  <tr class="even"><td>SA 9 oct 2004</td><td>17:30</td><td>Fribourg</td><td>-</td><td>Boncourt</td>Ste-Croix<td></td><td>92 - 110</td><td>&nbsp;</td></tr>
  <tr class="odd"><td>SA 9 oct 2004</td><td>17:30</td><td>Fribourg</td><td>-</td><td>Boncourt</td>Ste-Croix<td></td><td>92 - 110</td><td>&nbsp;</td></tr>
  <tr class="even"><td>SA 9 oct 2004</td><td>17:30</td><td>Fribourg</td><td>-</td><td>Boncourt</td>Ste-Croix<td></td><td>92 - 110</td><td>&nbsp;</td></tr>
  <tr class="odd"><td>SA 9 oct 2004</td><td>17:30</td><td>Fribourg</td><td>-</td><td>Boncourt</td>Ste-Croix<td></td><td>92 - 110</td><td>&nbsp;</td></tr>
  <tr class="even"><td>SA 9 oct 2004</td><td>17:30</td><td>Fribourg</td><td>-</td><td>Boncourt</td>Ste-Croix<td></td><td>92 - 110</td><td>&nbsp;</td></tr>
 </tbody>
</table>


Le code CSS

caption { 
   color: #ffffff; 
   background-color: #0d477a; 
   font-weight: bold; 
   text-align: left; 
   padding: 9px 0 0 9px; 
   margin: 0; 
}

table { 
   width: 100%; 
   border: 1px solid black; 
}

td { 
   padding: 0 0 0 9px; 
}

tr.odd { 
   background-color: #ffffff; 
}

tr.even { 
   background-color: #ffff99; 
}


Faut pas oublier que le DOCTYPE est XHTML 1.0 Strict
Modifié le 31 Oct 2004 - 11:54
Merci pour vos réponses, mais :

>ponsfrilus
Tu me proposes une mise en page à l'aide des tableaux qui n'est plus trop conseillée... en plus, je demandais une solution permettant d'éviter d'avoir à utiliser plus d'un tableau.

> Stephan
Ca ne résoud pas mon problème Smiley decu ... avez-vous bien compris en quoi il consistait ?
Vous le comprendrez plus facilement en visitant cette page... ça vaudra mieux que mes tentatives d'explications (qui ne sont visiblement pas claires)

Merci encore mais j'attends d'autres réponses !
Modifié le 31 Oct 2004 - 20:27
Sujet clos
Aller à