javascript - Styling tables using CSS - Stack Overflow

admin管理员组

文章数量:1317898

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.

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.

• javascript
• html
• css
• css-selectors
• html-table

Share Improve this question Follow edited Feb 6, 2014 at 4:39 Mr. Alien 157k3636 gold badges303303 silver badges285285 bronze badges asked Jul 24, 2013 at 9:36 MichaelMichael 16.1k3939 gold badges9898 silver badges145145 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 7

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

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

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 patible.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?

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

Try this one ...see the Demo

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

本文标签： javascriptStyling tables using CSSStack Overflow