28172 sujets

CSS et mise en forme, CSS3

[Résolu] Couleur de cellules dans un tableau

Bonjour,

J'ai un tableau à plusieurs colonnes. l'une est rouge.
Ensuite, je souhaite avoir une ligne verte.

Mon code HTML ressemble à cela : 

<tr>
  <td>l1-c1</td>
  <td class="rouge">l1-c2</td>
  <td>l1-c3</td>
</tr>
<tr class="vert">
  <td>l2-c1</td>
  <td class="rouge">l2-c2</td>
  <td>l2-c3</td>
</tr>
<tr>
  <td>l3-c1</td>
  <td class="rouge">l3-c2</td>
  <td>l3-c3</td>
</tr>


Et la feuille de style associée

td.rouge {
  background-color:red;
}
tr.vert {
  background-color:green !important;
}



Problème : En fait, cela ne marche pas.
Je pensais que l'attribut "!important" pour la couleur de fond de la classe "vert" aurait suffit à "empécher" la coloration en rouge de la cellule.


Question : Je fais fausse route ?
Est-ce bien la bonne méthode pour colorier une colonne ? pour colorier une ligne ?


Merci pour vos lumières (colorées ?)

A+ / F.
Modifié par Kleduts (20 Jul 2009 - 11:19)
J'ai lu les 2 articles et n'ont pas vraiment de rapport avec mon problème.

Je cherche à avoir une ligne verte dans le tableau que j'ai décrit.

Le problème que je rencontre, est que la cellule l2c2 est rouge alors que je la voudrais verte.

Je pensais que l'attribut "!important" dans la déclaration de la couleur de la classe verte sur la ligne, empêchait la surcharge de la couleur de la cellule (class rouge).

D'où ma question : comment faire pour que la cellule l2c2 reste verte.

A+ / F.
a écrit :
J'ai lu les 2 articles et n'ont pas vraiment de rapport avec mon problème.


Ces deux articles avaient pour objectif de te montrer comment bien employer l'élément !important Smiley cligne .

a écrit :
Le problème que je rencontre, est que la cellule l2c2 est rouge alors que je la voudrais verte.
D'où ma question : comment faire pour que la cellule l2c2 reste verte.


Eh bien, tu pourrais tout simplement changer ceci :


<tr class="vert">
				<td>l2-c1</td>
				<td class="[b]rouge[/b]">l2-c2</td>
				<td>l2-c3</td>
			</tr>


en


<tr class="vert">
				<td>l2-c1</td>
				<td class="[b]vert[/b]">l2-c2</td>
				<td>l2-c3</td>
			</tr>


Ce qui colore ta cellule l2-c2 en vert comme voulu.

Mais, comme je pense que tu veux que ta seconde colonne soit complètement rouge sauf la fameuse cellule l2-c2 il faudrait, à mon avis, se tourner vers un script javascript.
mmmh....

Non, je veux rester en CSS.

D'autre part, appliquer la classe "vert" à la cellule l2c2 n'a pas de sens car la la classe verte n'est défini que pour les balise <tr>.

A+ / F.
mmmh....

Non, je veux rester en CSS.

D'autre part, appliquer la classe "vert" à la cellule l2c2 n'a pas de sens car la la classe verte n'est défini que pour les balise <tr>.

A+ / F.
Salut,

Attention, les td s'affichent au-dessus des tr.
td.rouge { 
background-color:red; 
} 
tr.vert { 
background-color:green; 
}
La deuxième déclaration cible une ligne et la colore en vert. Donc sous l2C2, la ligne est bien verte. Par contre, l2c2 étant une td.rouge, la première déclaration s'applique et elle se colore en rouge (cachant du coup le background vert de la ligne qui passe sous elle).

Je crois que ce que tu veux faire c'est plutôt :
tr.vert td { 
background-color:green; 
}
PS : outre les problèmes de support, !important gêne l'application correcte des feuilles de style utilisateur, donc je te déconseille son utilisation et t'encourage à explorer plutôt les règles de priorité CSS.
Sujet clos
Aller à