homepage Welcome to WebmasterWorld Guest from 54.166.53.169
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Alternate table row colours
Anyone know an easy way of doing this?
BeeDeeDubbleU

WebmasterWorld Senior Member beedeedubbleu us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4456880 posted 10:13 am on May 23, 2012 (gmt 0)

On large tables of data with several columns it is useful to make alternate rows a different colour (for clarity). This is easily done with CSS simply by individually applying a style to each row but is there any trick or method of doing this automatically on large tables?

 

topr8

WebmasterWorld Senior Member topr8 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4456880 posted 10:46 am on May 23, 2012 (gmt 0)

nth child selector

something like:

tr:nth-child(odd) {
background-color:red;
}

not sure of browser support

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4456880 posted 10:52 am on May 23, 2012 (gmt 0)

You're asking how to apply, say,
<tr class = "dark">
and
<tr class = "light">
to alternate rows without doing the whole thing manually?

I've done the identical thing with Regular Expressions. You just have to be a little consistent in your raw html layout, because random line breaks can cause problems. Basically you take something like

<tr>(\n<td.+\n<td.+\n {however many cells in a row} </tr>\n+)<tr>

and replace globally with

<tr class = "dark">$1<tr class = "light">

If you're rearranging an existing table the "find" part becomes

<tr(?: class = "\w+")?>

This is the exceptional RegEx that tends to work better if you do it as an unsupervised global replace, straight through from top to bottom.

StoutFiles

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4456880 posted 12:18 pm on May 23, 2012 (gmt 0)

Are the tables static? If they are generated dynamically you can just have a counter as you populate rows, switching back and forth on odd and even numbers.

while(table_populates)
{

if($odd)
$color = "white";
else
$color= "gray";

echo '<tr style="background-color:'.$color.';">';

}

BeeDeeDubbleU

WebmasterWorld Senior Member beedeedubbleu us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4456880 posted 12:48 pm on May 23, 2012 (gmt 0)

Thanks folks, I'll have a look at this but some of it is over my head.

.

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4456880 posted 1:34 pm on May 23, 2012 (gmt 0)

I second topr8 suggestion.

:nth-child unfortunately doesn't work in IE < 9, however, jQuery does support the :nth-child selector. So if you really need to have striped tables in IE < 9, you could use jQuery select :nth-child(odd) and apply a class/style to those elements.

Hoople

10+ Year Member



 
Msg#: 4456880 posted 3:04 pm on May 23, 2012 (gmt 0)

Lots of info fodder found by searching "striped tables in IE".

Thanks to Fotiman for the phrase and +1 to topr8 as well.

Amongst the IE's several have issues. BeeDeeDubbleU your solution used may depend on the target browsers in use.

BeeDeeDubbleU

WebmasterWorld Senior Member beedeedubbleu us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4456880 posted 3:15 pm on May 23, 2012 (gmt 0)

All sounds a bit too complicated. :(

I think I'll just do it manually.

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4456880 posted 3:26 pm on May 23, 2012 (gmt 0)

It's not complicated at all.

<!DOCTYPE html>
<html>
<head>
<style>
tr:nth-child(odd) {
background-color:red;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>1 - 1</td>
<td>1 - 2</td>
</tr>
<tr>
<td>2 - 1</td>
<td>2 - 2</td>
</tr>
<tr>
<td>3 - 1</td>
<td>3 - 2</td>
</tr>
<tr>
<td>4 - 1</td>
<td>4 - 2</td>
</tr>
</tbody>
</table>
</body>
</html>

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4456880 posted 3:41 pm on May 23, 2012 (gmt 0)

Note, you'd want to put the CSS in an external stylesheet. This will give you striped tables for all current browsers, but not IE8, IE7, or IE6 (if you still support any of those). If you want to go the jQuery route, there's a pretty detailed, but easy to follow tutorial:
[docs.jquery.com...]

topr8

WebmasterWorld Senior Member topr8 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4456880 posted 3:41 pm on May 23, 2012 (gmt 0)

couldn't be more simple!

Fotiman got in before me! as he shows just add the style to the head or your style sheet and it will do it automatically! you could do this which would give your table alternate red and blue rows

<style>
tr:nth-child(odd) {background-color:red;}
tr:nth-child(even) {background-color:blue;}
</style>

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4456880 posted 3:48 pm on May 23, 2012 (gmt 0)

@topr8, or just this:

tr{background-color:blue;}
tr:nth-child(odd){background-color: red;}

:)

BeeDeeDubbleU

WebmasterWorld Senior Member beedeedubbleu us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4456880 posted 4:53 pm on May 23, 2012 (gmt 0)

Thanks guys. I now have it working and as you say it was dead easy.

topr8

WebmasterWorld Senior Member topr8 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4456880 posted 10:23 pm on May 23, 2012 (gmt 0)

@Fotiman

indeed! yes of course, much better!

alt131

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4456880 posted 2:57 pm on Jun 11, 2012 (gmt 0)

I'm coming to this late but wanted to say what an enjoyable read this thread is. Plus foti, great job on getting BDW to try advanced selectors, and BDW, good on you for giving them a try!

For completeness I wanted to add a css solution rather than javascript for ie7&8. Both support :first-child as well as the "+" adjacent sibling selector. That allows you to use the first row as a start point for counting the ones that follow. It's effectively a manual implementation of nth-child, definitely not as elegant, but nicer than manually inserting classes, avoids javascript, and obvious so it's easy to remove when ceasing to support those versions.
tr {background-color:blue;}
tr:first-child + tr,
tr:first-child + tr + tr + tr,
tr:first-child + tr + tr + tr + tr + tr,
tr:first-child + tr + tr + tr + tr + tr + tr + tr {background-color:red}
Keep the css neat to make it easy to scan/count the rows to identify where you are in the table, or if you want to avoid counting, just add two adjacent siblings to the previous selector.
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved