Rollover dans un tableau

Je publie ici une astuce CSS parue dans le Journal du Net car elle va sans doute intéresser pas mal de monde, et moi le premier car je me suis toujours un peu embété pour faire cet effet, et en réalité avec cette astuce ça va tout seul !

Le but est donc de colorier une ligne entière d’un tableau au passage de la souris.

Créez un tableau


<table cellspacing="0">
<tbody>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
<tr>
<td>12</td>
<td>23</td>
<td>22</td>
</tr>
<tr>
<td>132</td>
<td>65</td>
<td>65</td>
</tr>
<tr>
<td>12</td>
<td>12</td>
<td>33</td>
</tr>
</tbody>
</table>

Puis appliquez le style CSS suivant :

* {font-family: Geneva, Arial, Helvetica, sans-serif; font-size:12px}
table { background-color:#FFF; border: 1px solid #3366FF; border-collapse: separate;}
th {background-color:#3366FF; color:#FFCC66; }
tr:hover>td{ background-color:#B9CFFF; }
td {width: 50px; text-align: right; }

Seul bémol : ne fonctionne pas sous IE 6 … quelle surprise !!
En tous cas, merci à Mr Bertrand Dujardin de Poitiers qui a publié cette astuce, je n’ai pas trouvé l’adresse du site de l’auteur, mais si quelqu’un la connait je mettrai le lien avec plaisir :)

10 mai 2007 5 Comments

5 Responses to “Rollover dans un tableau”

  1. jeFFF
    11 mai 2007 at 8: #

    Hello,

    Si si, ca marche aussi, il faut simplement implementer une variante de suckerdown Dropfish etle tour est joué.

    Alors, tu fais comme ca :
    Tu vas a cette adresse rt tu recuperes la fonctiuon sfhover (http://www.htmldog.com/articles/suckerfish/dropdowns/)

    Dans la fonction tu remplaces :
    var sfEls = document.getElementById(« nav »).getElementsByTagName(« LI »);
    par :
    var sfEls = document.getElementById(« ma_table »).getElementsByTagName(« TR »);
    Ceci a pour effet de recuperer tous les TR de l’element en question et leur coller une classe sfhover.

    Tu places un id= »my_table » dans ta table.
    Pour terminer, t rajoutes ca dans ta CSS :
    tr.sfhover td{ background-color:#B9CFFF; }

    Et le tour est joué, ca marche sur IE6.
    J’espère que l’astuce te sera utile. ;-)

    A+
    jeFFF

  2. jeFFF
    11 mai 2007 at 8: #

    J’oubliais, dans mon précédent commentaire, les phautes de frappeuh sont en prime ;-)

    Et si quelqu’un peut m’expliquer pourquoi mon gravatar marche une fois sur 2, je suis preneur ;-)

    ++

  3. Stéphane
    14 mai 2007 at 14: #

    Merci JeFFF !!
    Pour le gravatar … si j’avais la réponse … !!

  4. Bertrand Dujardin
    4 juin 2007 at 10: #

    Si ca peut servir, tant mieux !

  5. Ber
    27 octobre 2009 at 2: #

    Merci, super top !!! ENFIN un code qui fonctionne à merveille !

Leave a Reply