bgColor d'une ligne s'il existe déjà un bgColor sur une cellule

**PoichOU** · 15/06/2007, 11h37

Bonjour

je voudrais faire un tableau à 2 lignes et 4 colonnes, je voudrais donner une couleur de fond (bleu et rouge) au 2 dernières colonnes et je voudrais qu'une ligne ai une couleur de fond (gris) lorsqu'on la survol.

voici que j'ai fait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
 table
  {
    border-spacing : 0px;
    border-collapse:collapse;
  }
 
  table td
  {
   border:1px solid #000;
  }
  td.col3
  {
    background-color: blue;
  }
  td.col4
  {
    background-color: red;
  }
  tr:hover
  {
    background-color: gray;
  }
</style>
</head>
<body>
  <table>
  <tbody>
    <tr>
      <td class="col1">Texte</td>
      <td class="col2">Texte</td>
      <td class="col3">Texte</td>
      <td class="col4">Texte</td>
    </tr>
    </tbody>
    <tbody>
    <tr>
      <td class="col1">Texte</td>
      <td class="col2">Texte</td>
      <td class="col3">Texte</td>
      <td class="col4">Texte</td>
    </tr>
    </tbody>
  </table>  
 
</body>
</html>

Mon problème est que la ligne prend bien une couleur d'arrière plan grise lors du survol, mais pas les 2 dernières colonnes qui garde leurs couleurs.

Quelqu'un aurait une idée ?

PoichOU

PS : question subsidiaire est-ce faisable sous ie ?

**Deallyra** · 15/06/2007, 11h40

le hover n'est pas prit en compte par IE autrement que sur une balise <a href="*.*">

Autrement dit, si tu veux que ça puisse marcher sur IE et FF, diriges toi vers du JS je pense...

**PoichOU** · 15/06/2007, 11h43

merci MimiCracra44 pour ta réponse, ok pour ie, dommage pour ceux qui l'utilise...

As-tu une idée pour mon problème ?

**Deallyra** · 15/06/2007, 11h47

je n'ai pas testé mais la fonction JS onmouseover devrait te permettre de changer la couleur de la ligne entière.
mais je ne suis pas sûre que ça puisse marcher...

**PoichOU** · 15/06/2007, 11h54

en fait je voudrais de préférence une solution en CSS.

sinon j'ai testé en faisant une fonction javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
 table
  {
    border-spacing : 0px;
    border-collapse:collapse;
  }
  table td
  {
   border:1px solid #000;
  }
  td.col3
  {
    background-color: blue;
  }
  td.col4
  {
    background-color: red;
  }
 
</style>
</head>
<body>
  <table>
  <tbody>
    <tr onmouseover="this.style.backgroundColor='gray';" onmouseout="this.style.backgroundColor='white';">
      <td class="col1">Texte</td>
      <td class="col2">Texte</td>
      <td class="col3">Texte</td>
      <td class="col4">Texte</td>
    </tr>
    </tbody>
    <tbody>
    <tr>
      <td class="col1">Texte</td>
      <td class="col2">Texte</td>
      <td class="col3">Texte</td>
      <td class="col4">Texte</td>
    </tr>
    </tbody>
  </table>  
</body>
</html>

mais le problème reste le même

**PoichOU** · 15/06/2007, 12h34

voici la soluce pour que ça marche en css (ie7 + firefox)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

tr:hover td

ce qui donne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
 table
  {
    border-spacing : 0px;
    border-collapse:collapse;
  }
 
  table td
  {
   border:1px solid #000;
  }
  td.col3
  {
    background-color: blue;
  }
  td.col4
  {
    background-color: red;
  }
  tr:hover td
  {
    background-color: gray;
  }
</style>
</head>
<body>
  <table>
  <tbody>
    <tr>
      <td class="col1">Texte</td>
      <td class="col2">Texte</td>
      <td class="col3">Texte</td>
      <td class="col4">Texte</td>
    </tr>
    </tbody>
    <tbody>
    <tr>
      <td class="col1">Texte</td>
      <td class="col2">Texte</td>
      <td class="col3">Texte</td>
      <td class="col4">Texte</td>
    </tr>
    </tbody>
  </table>  
 
</body>
</html>

merki à nico

bgColor d'une ligne s'il existe déjà un bgColor sur une cellule

Tableau en CSS

Discussions similaires

Partager

Partager