Welcome to WebmasterWorld Guest from 54.226.67.166

Forum Moderators: not2easy

Message Too Old, No Replies

Alternate table row colours

Anyone know an easy way of doing this?

     

BeeDeeDubbleU

10:13 am on May 23, 2012 (gmt 0)

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



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

10:46 am on May 23, 2012 (gmt 0)

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



nth child selector

something like:

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

not sure of browser support

lucy24

10:52 am on May 23, 2012 (gmt 0)

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



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

12:18 pm on May 23, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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

12:48 pm on May 23, 2012 (gmt 0)

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



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

.

Fotiman

1:34 pm on May 23, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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

3:04 pm on May 23, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

3:15 pm on May 23, 2012 (gmt 0)

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



All sounds a bit too complicated. :(

I think I'll just do it manually.

Fotiman

3:26 pm on May 23, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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

3:41 pm on May 23, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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

3:41 pm on May 23, 2012 (gmt 0)

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



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

3:48 pm on May 23, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



@topr8, or just this:

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

:)

BeeDeeDubbleU

4:53 pm on May 23, 2012 (gmt 0)

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



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

topr8

10:23 pm on May 23, 2012 (gmt 0)

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



@Fotiman

indeed! yes of course, much better!

alt131

2:57 pm on Jun 11, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month