Alternate table row colours

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)

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)

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)

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)

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)

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)

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)

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)

All sounds a bit too complicated. :(

I think I'll just do it manually.

Fotiman

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

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

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

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

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

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

@Fotiman

indeed! yes of course, much better!

alt131

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.