CSS couleur différente pour la table chaque ligne

Question

J'ai ce tableau avec la mise en forme CSS suivant:

<table cellspacing="2"> 
    <tbody> 
     <tr> 
      <th>Name</th>        
      <th>Area</th>        
     </tr> 
     <tr> 
      <td>${it.conference}</td>            
      <td>${it.accepted}</td>          
     </tr> 
    </tbody> 
</table> 

et CSS:

table { 
    padding-left: 10px; 
    width:90%; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:11px; 
    text-align:left; 
} 

th, td { 
    padding:5px 10px; 
} 

th { 
    color:#666666; 
    border-top:2px solid #b7ddf2; 
    background-color:#ebf4fb; 
} 

Comment puis-je appliquer des modifications css individuelles pour chaque ligne (par exemple , Je voudrais changer la couleur de 'Nom', sans gâcher avec le formatage des autres lignes, ce qui signifie, seulement modifier celui-ci.Est-ce possible?

Answer 1

Avec une seule méthode CSS, vous aurez besoin d'ajouter une classe à la ligne que vous souhaitez le style, comme ceci:

<table cellspacing="2"> 
     <tbody><tr> 
     <th class="color1">Name</th>        
     <th>Area</th>        
    </tr> 
     <td>${it.conference}</td>            
     <td>${it.accepted}</td>          
    </tr></tbody> 
    </table> 

puis dénommer:

.color1 { 
    background-color: (somecolor); 
} 

Answer 2

Vous cherchez quelque chose? semblable à nth-child CSS pseudo-class?

Si vous voulez un contrôle plus fin du grain sur chaque individu, vous pouvez envisager d'appliquer des classes et de les styliser différemment. Éditer: Voici a few examples de nth-child.

Answer 3

appliquent une classe à tout élément que vous voulez, et le style CSS. http://jsfiddle.net/robx/wzXAJ/ IE: appliquer <th class="name">Name</th>.

Answer 4

Si vous pouvez vous en sortir sans le soutien pour IE 7 et 8, vous pouvez faire ...

th:nth-of-type(1) { 
    color: #c00; 
} 

Sinon, ajoutez une classe telle que th class = "whatever", puis ...

th.whatever { 
    color: #c00; 
} 

Voir une démonstration en direct:

http://jsfiddle.net/GFPgB/

Answer 5

Si vous voulez appliquer le style CSS b ased sur le contenu de l'élément, ce qui n'est pas possible avec CSS. Si vous souhaitez par contre appliquer des styles CSS en fonction de leur position, vous pouvez utiliser les pseudo-classes nth-child (N). Par exemple

th:nth-child(1) /*for name*/ 
{ 
color: blue; 
} 

th:nth-child(2) /*for area*/ 
{ 
color: red; 
} 

Answer 6

Pour le style « Même » & lignes « Odd » puis utilisez CSS3 comme:

tr:nth-child(odd){ 
    background:#999;} 

tr:nth-child(even){ 
    background:#f5f5f5;} 

Answer 7

Je sais que c'est une vieille réponse, mais je fait un exemple amusant dans Jquery, et peut-être que cela aidera quelqu'un avec sa question.

JSFIDDLE

Il va obtenir tous les éléments <p> de la boucle document et volonté à travers eux, comme jquery le fait, il va ajouter un style CSS à chaque élément <p> sur la page.