Name...">
Geek asks and answers

CSS different color for the table each row

I have this table with the following CSS formatting:

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

And 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;
}

How can I apply individual CSS modifications for each line (for example, I would like to change the "Name" color without messing up the other line formatting, which means that it only needs to be changed. Do it?

+3
source share
7 answers

Using the CSS only method, you need to add some class to the string you would like to create, for example:

<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>

and then configure it:

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

Are you looking for something like the nth-child CSS pseudo-class ?

If you need finer grain control over each of them, you might want to apply classes to them and style them differently.

: nth-child.

+4

, , CSS-. http://jsfiddle.net/robx/wzXAJ/ IE: <th class="name">Name</th>.

0

IE 7 8, ...

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

, th class= "whatever", ...

th.whatever {
  color: #c00;
}

-:

http://jsfiddle.net/GFPgB/

0

CSS, , CSS. , , CSS , - nth-child (N).

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

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

"" "", CSS3 :

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

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

, , JQuery, , , - .

JSFIDDLE

It will get all the <p>elements from documentand go through them, as jquery does, it will add a CSS style to each element <p>on the page.

0
source

More articles:


All Articles