28220 sujets

CSS et mise en forme, CSS3

[Résolu] Bug tableau avec l'attribut caption

Bonjour,

Je suis actuellement entrain de développer un site et j'ai un petit poblème avec la mise en page d'un tableau couplé à css, plus particulièrement avec l'attribut caption.

Code css:

div#mainColumn table {
	float: left;
	border: 1px solid #9CCE63;
	width: 220px;
	border-collapse: collapse;
	}
		
div#mainColumn table caption {
	background-color: #9CCE63;
	caption-side: top;
	}
		
div#mainColumn td, th {
	border: 1px solid #9CCE63;
	padding: 0;
	text-align: center;
	}


Code html:

<table summary="Classement des hommes de série a">
  <caption>Hommes Série A</caption>
  <tr>
    <th>Année</th>
    <th>Joueur</th>
  </tr>
  <tr>
    <td>2004</td>
    <td>Samuel Debons</td>
  </tr>
  <tr>
    <td>2003</td>
    <td>Daniel Rey </td>
  </tr>
  <tr>
    <td>2001</td>
    <td>Stéphane Probst</td>
  </tr>
  <tr>
    <td>2000</td>
    <td>Claude Rey</td>
  </tr>
  <tr>
    <td>1999</td>
    <td>Claude Rey</td>
  </tr>
  <tr>
    <td>1998</td>
    <td>Olivier Knupfer</td>
  </tr>
  <tr>
    <td>1997</td>
    <td>Olivier Knupfer</td>
  </tr>
  <tr>
    <td>1996</td>
    <td>Pierre-Alain Rey</td>
  </tr>
</table>


Voici ce que cela donne sous IE6:
upload/859-ieok.gif

cela s'affiche correctement, mais sous firefox :
upload/859-ffbug.gif

il y a un décalage de quelques pixels entre le caption et le tableau à proprement parler.

Y a t'il un bug au niveau de firefox ou y a t'il un moyen de régler ce problème en bidouillant le code, sachant que j'utilise un doctype html 4.01 transitional ?

Merci pour vos éclairages

David Smiley ravi
Modifié par Daweed (02 Jun 2005 - 13:55)
Bonjour ;
si tu supprimes la couleur de fond de ton "caption", tu t'apercevras que celui-ci est indépendant du tableau ; il te faut alors aussi mettre un border à "caption"
a écrit :

Bonjour ;
si tu supprimes la couleur de fond de ton "caption", tu t'apercevras que celui-ci est indépendant du tableau ; il te faut alors aussi mettre un border à "caption"


hello, j'ai bien essayé de mettre un border au caption mais le seul effet que cela produise au niveau visuel et que la hauteur du "bloc" caption s'élargisse de deux pixels mais rien au niveau largeur, très bizarre.

Par contre si j'enlève le border-collapse de mon table tout s'aligne correctement mais à ce moment la l'effet visual recherché n'est plus atteint car je veux fusionner les bords des cellules entre-elles pour éviter d'avoir ces doubles lignes.
essaye en ne mettant que des "border-left" et "border-right" sur ton "caption", éventuellement en réduisant sa largeur : la balise "caption" se gère indépendamment du tableau, même si elle fonctionne en référence (même largeur par défaut, mais pas même fonctionnement).
Autre solution : supprime la bordure générique de ton tableau, pour ne laisser que celles des "tr" et "td" : elles sont collapses, mais celles du tableau se surajoutent tout autour des cellules, sauf autour du caption, il me semble :
table {
border-collapse: collapse;
}
tr, td {
boder: 1px solid #123;
}

Modifié par Macpom (01 Jun 2005 - 15:43)
J'ai essayé tes deux solutions mais rien n'y fait. Je pense que ca doit venir d'un problème de compréhension de la part de firefox mais je n 'ai pas testé d'autres navigateurs.

Sinon merci pour tes réponses rapides Smiley ravi
Bon, j'ai repris ton code :
1er élément de réponse : pour recoller ton "caption" sur la gauche, tu lui demandes la même chose qu'à "table" : [caption {float: left;}]
Mais ton caption ne prend plus que sur une seule colonne ; et si on lui met la même largeur, il reste bien sur une seule colonne, et, donc, décalle la deuxième ; tu dois avoir une autre erreur quelque part ...
Modifié par Macpom (01 Jun 2005 - 16:13)
Bon, me suis toturé les méninges un moment hier soir : quand tu mets en "float: left" ton caption, celui-ci se réduit à sur une seule colonne au lieu des deux, je ne vois pas pourquoi. Tu peux donc abandonner cette solution, j'en ai trouvé une meilleure, efficace, qui passe aussi sous ie, mais dont je ne comprends pas pourquoi elle est nécessaire...
Tu rajoutes un "margin-left: 1px;" à ton "table", tout simplement, ce qui te donne :

table {
float: left;
[b]margin-left: 1px;[/b]
border: 1px solid #9CCE63;
width: 220px;
border-collapse: collapse;
}

caption {
background-color: #9CCE63;
caption-side: top;
}

td, th {
border: 1px solid #9CCE63;
padding: 0;
text-align: center;
}

Smiley sweatdrop
La nuit porte toujours conseil...
N'oublie pas de mettre un résolu, quand tu auras vérifié que ça marche...
oui en effet cela à l'air de corriger le bug d'espacement ! j'avais tout essayé sauf ça, joli.

Donc pour conclure il s'agit bien d'une erreur d'interprétation du css par FF ?
Car avec IE cela passait bien. En tout cas c'est très bizarre.

Merci beaucoup d'avoir trouvé ce contournement c'est sympa Smiley ravi
Sujet clos
Aller à