Problème de tableau ( css )

affaire de design

17 février 2006 à 21:27:23

Bonjour!
Je n'arrive pas à changer l'apparence d'une certaine ligne d'un tableau :

<table>
<tr>
<th>titre 1</th>
<th>titre 2</th>
<th>titre 3</th>
</tr>
<tr>
<td class="sous-titre">sous-titre 1</td>
<td class="sous-titre">sous-titre 2</td>
<td class="sous-titre">sous-titre 3</td>
</tr>
<tr>
<td>texte 1</td>
<td>texte 2</td>
<td>texte 3</td>
</tr>
</table>

Jusque là, aucun problème mais voilà,
le code suivant ne donne aucun résultat

th
{
background-color:red;/*Pourquoi pas rouge ?*/
border:5px solid yellow;
color:white;
}
/*Aucun problème pour l'instant*/
.sous-titre
{
background-color:green;/*on change*/
color:blue;
border:2px dashed teal;
}

td
{
background-color:grey;/*on change ENCORE*/
color:black;
border:10px solid #196683;
}

Et là, l'apparence des cellules ".sous-titre" est la même que celle des cellules "td" (alors que l'on avait tout changé !) o_O

.
S'il vous plaît, aidez-moi ! :-°

Merci d'avance

yöm

17 février 2006 à 22:16:57

Change l'ordre de ta cascade : défini l'élément générique td avant une classe particulière

(à propos du code)
Pourquoi n'utilises-tu pas une ligne d'entête pour tes titres ?
Tu peux aussi appliquer la classe "sous-titre" à la ligne concernée (la balise <tr>)

soulex

17 février 2006 à 22:19:42

Je n'ai jamais eu affaire avec ce genre de problème mais je pense savoir de où il vient.

La classe "sous-titre" {green} est contenue dans une balise <td> {grey}

<td> a la priorité sur class ainsi <td class="sous-titre"> s'affiche {grey}.

Essaie de créer une classe pour chaque <td> et ca devrait fonctionner ;-)

Par exemple :

<table>
<tr>
<th>titre 1</th>
<th>titre 2</th>
<th>titre 3</th>
</tr>
<tr>
<td class="sous-titre">sous-titre 1</td>
<td class="sous-titre">sous-titre 2</td>
<td class="sous-titre">sous-titre 3</td>
</tr>
<tr>
<td class="titre">texte 1</td>
<td class="titre">texte 2</td>
<td class="titre">texte 3</td>
</tr>
</table>

th
{
background-color:red;
border:5px solid yellow;
color:white;
}

.sous-titre
{
background-color:green;/*on change*/
color:blue;
border:2px dashed teal;
}

.titre
{
background-color:grey;
color:black;
border:10px solid #196683;
}