We help IT Professionals succeed at work.
Get Started
CSS Alternating row color
Hello Experts.
Would like to make every other color in a table light grey
to make it easier to read. Found several websites that
show snippets like
tr:nth-child(odd) { background-color:#eee; }
tr:nth-child(even) { background-color:#fff; }
but when I put them into a page they don't work.
So I found a site that shows the complete page at
http://www.csstothepoint.com/rowalternating.htm
and there is an example from this page at
http://www.csstothepoint.com/example_rowalternating.htm
that looks like what is desired.
Like this
![CSS-alternating-rowa.gif]()
When a VIew>Source is done the code copied below
is displayed.
When the code is pasted into an HTML file I get
![Code from View Source]()
Using IE 10 for both views.
How can the same code, one view from the
web and one viewed from the hard drive
display so differently?
Thanks.
Allen in Dallas
<html>
<head>
<style>
tr:nth-child(even) {
background-color: #0000ff;
color: #ffffff;
}
</style>
</head>
<body>
<table>
<tr>
<td>Germany</td>
<td>4-0</td>
<td>Australia</td>
</tr>
<tr>
<td>Germany</td>
<td>4-1</td>
<td>England</td>
</tr>
<tr>
<td>Germany</td>
<td>4-0</td>
<td>Argentina</td>
</tr>
</table>
</body>
</html>
Would like to make every other color in a table light grey
to make it easier to read. Found several websites that
show snippets like
tr:nth-child(odd) { background-color:#eee; }
tr:nth-child(even) { background-color:#fff; }
but when I put them into a page they don't work.
So I found a site that shows the complete page at
http://www.csstothepoint.com/rowalternating.htm
and there is an example from this page at
http://www.csstothepoint.com/example_rowalternating.htm
that looks like what is desired.
Like this
When a VIew>Source is done the code copied belowis displayed.
When the code is pasted into an HTML file I get
Using IE 10 for both views.
How can the same code, one view from the
web and one viewed from the hard drive
display so differently?
Thanks.
Allen in Dallas
<html>
<head>
<style>
tr:nth-child(even) {
background-color: #0000ff;
color: #ffffff;
}
</style>
</head>
<body>
<table>
<tr>
<td>Germany</td>
<td>4-0</td>
<td>Australia</td>
</tr>
<tr>
<td>Germany</td>
<td>4-1</td>
<td>England</td>
</tr>
<tr>
<td>Germany</td>
<td>4-0</td>
<td>Argentina</td>
</tr>
</table>
</body>
</html>
Why Experts Exchange?
Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.
Jim Murphy
Programmer at Smart IT Solutions
When asked, what has been your best career decision?
Deciding to stick with EE.
Mohamed Asif
Technical Department Head
Being involved with EE helped me to grow personally and professionally.
Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question
Connect with Certified Experts to gain insight and support on specific technology challenges including:
- Troubleshooting
- Research
- Professional Opinions
Did You Know?
We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE