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
When a VIew>Source is done the code copied below
is 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>
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>
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Just checked that code from file / web in FF and IE (8,9,10,11) Works everywhere except IE8 - which is expected because IE8 does not have support for nth-child.
Have you checked the page from other browsers?
Have you checked the page from other browsers?
Premium Content
You need an Expert Office subscription to comment.Start Free Trial