使用CSS样式表

Question

I have a problem with styling tables using CSS.

So I have a table in my HTML file:

<table class="altrowstable" id="alternatecolor">
<tr>
    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
    <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
    <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
<tr>
    <td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
<tr>
    <td>Text 4A</td><td>Text 4B</td><td>Text 4C</td>
</tr>
<tr>
    <td>Text 5A</td><td>Text 5B</td><td>Text 5C</td>
</tr>
</table>

Here is my JavaScript file:

function altRows(id){
if(document.getElementsByTagName){  

    var table = document.getElementById(id);  
    var rows = table.getElementsByTagName("tr"); 

    for(i = 0; i < rows.length; i++){          
        if(i % 2 == 0){
            rows[i].className = "evenrowcolor";
        }else{
            rows[i].className = "oddrowcolor";
        }      
    }
  }
 }
 window.onload=function(){
altRows('alternatecolor');
 }

And here is my CSS file:

table.altrowstable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #a9c6c9;
    border-collapse: collapse;
}
table.altrowstable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}
table.altrowstable td {
    border-width: 1px;
    padding: 8px;
        border-style: solid;
    border-color: #a9c6c9;
}

table.oddrowcolor{
    background-color:#d4e3e5;
}
table.evenrowcolor{
    background-color:#c3dde0;
}

The problem is that it is not changing color neither odd rows nor even odd.

What am I doing wrong?

Thanks.

Answer 1

I'll provide you a CSS solution for this:

table.class_name tr:nth-child(odd) {
   /* Styles */
}

table.class_name tr:nth-child(even) {
   /* Styles */
}

That's all you need, although it's not supported in IE 8 and earlier.

Demo

For your table headers, you can simply use a different selector to over ride the background styles like

table.altrowstable tr th {
    background: #fff;
}

Demo 2

Answer 2

I did check your code and found a little correction iin the css is needed to get the expected solution. There should be an empty space between the table and row classname.

table .oddrowcolor{
   background-color:#d4e3e5;
}
table .evenrowcolor{
   background-color:#c3dde0;
}

Answer 3

I like to provide solutions that dont tinker or modify the original source much. Your HTML is fine, JScript is fine(very fine). Good to see that you use the .classname so that is is cross brwoser compatible.So all i did is change the classes for the CSS

YOUR CODE

table.oddrowcolor {
    background-color:#d4e3e5;
}
table.evenrowcolor {
    background-color:#c3dde0;
}

MY CHANGE

tr.oddrowcolor {
    background-color:#d4e3e5;
}
tr.evenrowcolor {
    background-color:#c3dde0;
}

WORKING FIDDLE

total change from your code to mine. 8 characters. Simple ain't it?

Answer 4

You have a problem within your CSS. You are setting the class for table, while as it should be for td.

You also need to modify your below js as style can be applied to td and not to tr

var rows = table.getElementsByTagName("td"); 

Here is the problem in your CSS

table.oddrowcolor{
    background-color:#d4e3e5;
}
table.evenrowcolor{
    background-color:#c3dde0;
}

You should be using this instead

table td.oddrowcolor{
    background-color:#d4e3e5;
}
table td.evenrowcolor{
    background-color:#c3dde0;
}

jsFiddle

Answer 5

Try this one ... see the Demo

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}