couleur de fond ligne et cellule

**CAML** · 17/07/2007, 16h38

Bonjour,

J'ai un problème pour une 'surcharge' de propriété... j'explique :

Example :
je souhaite pouvoir dire qu'une ligne d'une table soit rouge mais qu'une cellule particulière soit jaune...

j'ai fait un petit exemple pour illustrer la chose :
dans cette example la ligne 2 et bien en rouge mais la premiere cellule laquel j'ai attaché un css pour mettre en jaune reste en rouge

y a t'il moyen de regler ce probleme ? merci d'avance !!

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
<!--
 
#itemrows { border: 1px solid #777; margin: 0; padding: 0; display: block; }
#itemrows h2 { font-weight:normal; display: inline; margin: 0; font-size:10px;}
#itemrows th { border: 1px solid #aaa; background-color: #003399; color: #fff; text-align: center; padding: 0.25em; font-size: 110%; }
#itemrows td {border: 1px solid #000; padding: 0.4em; }
#itemrows .Redrow td {border-top: 5px solid #000; border-bottom: 5px solid #000; padding: 0.4em; background-color:red; }
#itemrows .boldleft { border-left: 5px solid #000; padding: 0.4em; }
#itemrows .boldright { border-right: 5px solid #000; padding: 0.4em; }
 
.testJaune td{background-color:yellow;}
 
-->
</style>
</head>
<body>
    <table id="itemrows" width="75%" cellspacing="0">
        <tr>
            <th scope="col">
                Column 1</th>
            <th scope="col">
                Column 2</th>
            <th scope="col">
                Column3</th>
        </tr>
        <tr>
            <td>
                row1</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr class="Redrow">
            <td class="testJaune" >
                row2</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                row3</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                row4</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
    </table>
</body>
</html>

**Bisûnûrs** · 17/07/2007, 19h34

Ton CSS est faux.

Tu mets :

Code :

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

.testJaune td{background-color:yellow;}

Il faudrait mettre :

Code :

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

.testJaune{background-color:yellow;}

ou

Code :

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

td.testJaune{background-color:yellow;}

Tu disais à la balise td qui se trouvais dans celle dont la classe est testJaune de se mettre en jaune, seulement ta balise td ne comporte pas de balise td.

**CAML** · 17/07/2007, 22h45

Ok, merci de ton eclaircissement ! J'ai effectivement mal utilisé les styles...
Cependant, après correction ma première cellule de ma ligne rouge n'apparait toujours pas en jaune ?!

Ce que je souhaite faire est il possible ???

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
<!--
 
#itemrows { border: 1px solid #777; margin: 0; padding: 0; display: block; }
#itemrows h2 { font-weight:normal; display: inline; margin: 0; font-size:10px;}
#itemrows th { border: 1px solid #aaa; background-color: #003399; color: #fff; text-align: center; padding: 0.25em; font-size: 110%; }
#itemrows td {border: 1px solid #000; padding: 0.4em; }
#itemrows .Redrow td {border-top: 5px solid #000; border-bottom: 5px solid #000; padding: 0.4em; background-color:red; }
#itemrows .boldleft { border-left: 5px solid #000; padding: 0.4em; }
#itemrows .boldright { border-right: 5px solid #000; padding: 0.4em; }
 
.testJaune {background-color:yellow;}
 
-->
</style>
</head>
<body>
    <table id="itemrows" width="75%" cellspacing="0">
        <tr>
            <th scope="col">
                Column 1</th>
            <th scope="col">
                Column 2</th>
            <th scope="col">
                Column3</th>
        </tr>
        <tr>
            <td>
                row1</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr class="Redrow ">
            <td class="testRed testJaune   ">
                row2</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                row3</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                row4</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
    </table>
</body>
</html>

**kaiser59** · 18/07/2007, 01h03

Salut,

As-tu essayé ceci ?

Code css :

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

#itemrows  .testJaune  {background-color: #ffff00;}

++

**Candygirl** · 18/07/2007, 01h31

Envoyé par kaiser59

Salut,

As-tu essayé ceci ?

Code css :

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

#itemrows  .testJaune  {background-color: #ffff00;}

ça ne suffira pas; ton sélecteur reste moins spécifique que celui pour définir la coleur rouge.

Tu dois rajouter encore au minimum une balise. Par exemple:

Code :

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

#itemrows  td.testJaune  {background-color: #ffff00;}

ou

Code :

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

table#itemrows  .testJaune  {background-color: #ffff00;}

ou

Code :

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

body #itemrows  .testJaune  {background-color: #ffff00;}

ou encore

Code :

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

#itemrows  .Redrow .testJaune  {background-color: #ffff00;}

,...

**CAML** · 18/07/2007, 08h24

Ok merci de votre aide j'ai reussi à avoir ce que je souhaitais !
(Sympa la doc je l'ai ajouter dans mes favoris

)

couleur de fond ligne et cellule

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager