28172 sujets

CSS et mise en forme, CSS3

[résolu]Tableau plusieurs couleurs en css avec hover

Salut à tous. J'ai une petite question concernant les tableaux que je n'ai pas utilisés depuis (très) longtemps! Smiley langue

En fait, j'ai une ligne de titres en haut (th) et une colonne à gauche avec des pseudos titres (td) en gris foncé puis mon contenu en gris clair.


<table width="891" border="1">
  <tr>
    <th class="nobordure"><strong>Mon tableau</strong></th>
    <th class="grise2"><div align="center">titre 1 </div></th>
    <th class="grise2"><div align="center">titre 2</div></th>
    <th class="grise2"><div align="center">titre 3</div></th>
    <th class="grise2"><div align="center">titre 4 </div></th>
  </tr>
  <tr class="grise">
    <td class="grise2" width="355">option 1 </td>
    <td width="125"><div align="right">10</div></td>
    <td width="125"><div align="right">20</div></td>
    <td width="125"><div align="right">30</div></td>
    <td width="125"><div align="right">40</div></td>
  </tr>
  <tr class="grise">
    <td class="grise2">option 2 </td>
    <td><div align="right">11</div></td>
    <td><div align="right">21</div></td>
    <td><div align="right">31</div></td>
    <td><div align="right">41</div></td>
  </tr>
</table>




J'aurais aimé qu'au survole des lignes (sauf la ligne th), toute la ligne sélectionnée devienne quasi blanche.
Sauf que ce n'est que mon "contenu" en gris clair qui régagit avec le hover et le pseudo titre en gris foncé de la colonne de gauche ne réagit pas... J'ai testé pas mal de configuration css et html mais le résultat a toujours était le même. En voici une (parmi toutes celles que j'ai testé) :


.grise{
 background-color:#e7e7e7;
border:2px solid #ffffff !important; 
}

.grise:hover{
background-color:#f4f4f4 !important;
border:2px solid #ffffff !important; 
}

.grise2{
 background-color:#d7d7d7;
border:2px solid #ffffff !important; 
}

.nobordure{
 background-color:#ffffff;
border:2px solid #ffffff; 
}



Avez-vous une solution pour que toute la ligne réagisse au hover svp?
J'ai aussi testé le .grise2:hover mais la cellule ne change de couleur que si l'on est dessus et pas si l'on est sur une autre cellule de la ligne comme je le souhaite.
Merci.
Modifié par __Nianiok_43___ (09 Mar 2012 - 14:16)
Je pensais qu'il y aurait une solution toute con à laquelle je n'aurais pas pensé mais apparemment personne ne voit...
UP quand même!
Bonjour,

Le code HTML du tableau (sans attributs) :

<table>
<thead>
<tr>
<th>titre</th>
<th>titre</th>
<th>titre</th>
</tr>
</thead>
<tbody>
<tr>
<th>titre</th>
<td>texte</td>
<td>texte</td>
</tr>
<tr>
<th>titre</th>
<td>texte</td>
<td>texte</td>
</tr>
<tr>
<th>titre</th>
<td>texte</td>
<td>texte/td>
</tr>
</tbody>
</table>


Le code CSS utile (uniquement les background-color) :

table {
	background-color: rgb(240, 240, 240);
}

th {
	background-color: rgb(220, 220, 220)
}

tbody tr:hover, tbody tr:hover th {
	background-color: rgb(255, 255, 255);
}


Cela dit, tu ne me sembles pas avoir bien saisi le principe de séparation de la forme et du contenu et les possibilités des CSS : la largeur du tableau, les bordures de tableau, la largeur des cellules, tout cela se définit en CSS, et non via des width="891" border="1" , des <div align="center">titre 1</div> et des <td width="125"><div align="right">20</div></td>.

Tu peux également utiliser des th pour la colonne gauche de ton tableau, au lieu de td avec un pseudo-titre. Les balises thead (en-tête de tableau) et tbody (corps de tableau) te permettent d'adresser des mises en formes spécifiques aux th de première rangée et aux autres. Et, grâce à ces balises, tu n'as besoin d'utiliser aucune classe pour mettre en forme les éléments de ton tableau, à moins d'avoir des cellules uniques qui nécessitent des mises en forme spécifiques. Et si tu as des tableaux avec des mises en forme différentes, une simple classe sur la balise table suffira.

Tu peux encore utiliser le sélecteur first-child pour cibler la première cellule d'une rangée (tr td:first-child { font-weight: bold }, tr + tr td:first-child { font-weight: bold }, les sélecteurs :last-child, :nth-child, first-of-type, :last-of-type, etc.

+ sur ces différents sélecteurs :

Sélectionner les frères d'un élément en CSS

La propriété CSS :nth-child pour un contrôle absolu de vos listes

Personnaliser ses listes (css inside)

6.6.5 Les pseudo-classes structurelles (Module CSS3 : Sélecteurs W3C)

Je crois que je n'ai rien oublié, bonne continuation.
Modifié par thierry (08 Mar 2012 - 20:49)
Salut. Bah disons que les tableaux je ne les utilise jamais et là, j'ai pris un exemple bateau copié de dreamweaver pour poster ici afin de comprendre le fonctionnement que je recherchais!

Bref, je vais lire ta réponse de plus prêt! Merci.


edit: impec tout ça, merci beaucoup Smiley cligne
Modifié par __Nianiok_43___ (09 Mar 2012 - 11:49)
Sujet clos
Aller à