CODEWITHSUNDEEP
javascripthtmlcsscss-selectorshtml-table
Michael
Michael

Reputation: 16142

Styling tables using CSS

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.

Upvotes: 1

Views: 4046

Answers (5)

Mr. Alien
Mr. Alien

Reputation: 157414

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

Upvotes: 7

defau1t
defau1t

Reputation: 10619

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

Upvotes: 0

AnaMaria
AnaMaria

Reputation: 3621

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?

Upvotes: 2

Rupam Datta
Rupam Datta

Reputation: 1889

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

Upvotes: 2

Ganesh Rengarajan
Ganesh Rengarajan

Reputation: 2006

Try this one ...see the Demo

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

Upvotes: -2

Related Questions