28172 sujets

CSS et mise en forme, CSS3

Css pour col avec diferents colspan

Salut salut

J'explique mon soucis:

J'ai un tableau "simple" avec des 
colgroup
et 
col
comme ce qui suis :

<table>
<colgroup span="2">
   <col class="col1"/>
   <col class="col2"/>
</colgroup>
<thead>
   <tr>
      <th colspan="2">Semaines</th>
   </tr>
</thead>
<tbody>
   <tr>
      <td>cell1</td>
      <td>cell2</td>
   </tr>
</tbody>
</table>


Mon soucis, si j'applique un style a .col1 alors mon th qui s’étend sur 2 colonne est affecté
alors que si j'applique un style à .col2 il n'est pas affecter

Donc soit c'est un comportement normal ? pas spécifié ? bug du navigateur (testé sous FF4 et chrome)

Si c'est un comportement normal comment l'éviter ?
Modifié par ryuran (22 Jun 2011 - 13:05)
Essaye de "reset" le style de ton th à la suite du style de col1


.col1
{
ton style pour col1
}

.col1 th
{
les meme parametres que col1 mais passé à 0
}
as tu testé ?
parce que chez moi sous FF 4 ou google chrome



.col1{
	background-color:#88c;
}
.col1 th{
	background-color:#000;
}

ne change strictement rien


Et vu que techniquement (structure xml) le <th> n'est pas dans le <col>, je ne suis pas sur que le sélecteur hiérarchique fonctionne
Modifié par ryuran (22 Jun 2011 - 14:33)
oui excuse moi il faut que tu change le sélecteur. ne met pas .col1 th mais th
Modifié par ptitvincent (22 Jun 2011 - 14:34)
En fait le cas que j'ai est plus complexe que ce que j'ai expliqué ci-dessus.

Car 
th{ opacity:0.7; }


ce qui fait que quelque soit la couleur de fond du <th>, on verra toujours la couleur de fond de sa colonne
Si ton titre est dans le premier tr du tableau tu peux faire


table tr:first-child
{
    background-color : #fff;
}


mais je ne fais qu'extrapoler ce que je t'ai dit plus haut, libre à toi d'en faire autant pour trouver la solution car la tu dois avoir tous les éléments en main Smiley smile
non pas du tout... colgroup n'est pas fait pour prévoir ce que tu vas en faire, il te permet d'appliquer un style à tout une colonne.

Toi tu veux sortir de ce cas de figure en imposant à un de tes titres de remplir 2 lignes. Or ce titre est un élément contenu UNIQUEMENT dans une seule colonne (il ne peut pas en être autrement). Donc il reçoit les paramètres qu'on applique à sa colonne.

si tu décide que ton titre ne doit pas avoir ces paramètres, libre à toi ! Il faut juste en tenir informé ton Css si j’ose dire. Mais le colgroup lui, à bien fait son boulot. Il n'y a donc aucun "problème" par rapport à cela, il y en avait un par rapport à ton objectif de mise en page, et tu l'a bel-et-bien résolus et pas du tout contourné.

à bientot.
Je suis d'accord avec toi.
Mais vu que le <th> a un colspan="2" il devrait appartenir à la col1 et à la col2 vu que visuellement il est dans les 2 colonnes.

Et ce n'est pas le cas car structurellement il n'est que dans la colonne1
Sujet clos
Aller à