CSS alternating table row color 1

petey · Aug 28, 2002

Anybody know of a way to use CSS to make table rows alternate color besides doing something like this?

Code:

<table>
<tr class=&quot;odd&quot;> ... </tr>
<tr class=&quot;even&quot;> ... </tr>
<tr class=&quot;odd&quot;> ... </tr>
</table>

I don't want to have to hard-code the odd/even stuff. I'd like to find a way to have CSS apply alternating colors at "runtime", maybe with a pseudo-selector or something?

Code:

<!-- fictitious styles -->
<style>
tr:odd { background-color: #white; }
tr:even { background-color: #lightgray; }
</style>

Anybody know of a way to do this?

starway · Aug 28, 2002

Read my post here: thread216-337294
I answered this question there.

Tarwn · Aug 28, 2002

Ok, in answer to your question, here is a way to do this with javascript:

Code:

<html>
<head>
<script language=&quot;JavaScript&quot;>
<!--
function setBg(tableId){
	var tbl = document.getElementById(tableId)
	var color0 = &quot;#eeeeee&quot;
	var color1 = &quot;#bbeeee&quot;

	var i;
	for(i = 0;i<tbl.rows.length;i++){
		eval(&quot;tbl.rows(i).style.backgroundColor = color&quot;+(i%2));
		alert(&quot;tbl.rows(i).style.backgroundColor = color&quot;+(i%2));
	} 
}
//-->
</script>
</head>
<body onLoad=&quot;setBg('myTable');&quot;>
<table id=&quot;myTable&quot; width=&quot;100%&quot;>
	<tr>
		<td>
			&nbsp;
		</td>
	</tr>
	<tr>
		<td>
			&nbsp;
		</td>
	</tr>
	<tr>
		<td>
			&nbsp;
		</td>
	</tr>
</body>
</html>

This is a sample page as well, basically you call the setBg function with the id you assign your table, it then goes through and alternates setting each row to color0 or color1. Not sure if its NS compatible, don't have it on my machine right now.
-Tarwn ------------ My Little Dictionary ---------
Reverse Engineering - The expensive solution to not paying for proper documentation

petey · Aug 29, 2002

Hmm... I suppose JavaScript *could* be used, although CSS seems like a more sensible route, except no CSS (or CSS2) method seems to exist for alternating table row colors (that I know of).

onpnt · Aug 29, 2002

your example you provided stating the class is the way to do it via CSS. CSS really doesn't have functionality. that is where javascript comes in. Sometimes starting over can fix a problem at the end

http://www.onpntwebdesigns.com

admin@onpntwebdesigns.com

starway · Aug 30, 2002

OK, look here: thread216-338918
I explained there how to do it without javascript.

Tarwn · Aug 30, 2002

Starway, your two links don't answer the question here.
CSS can not specify to only apply a style to a specified subsection of a class (in this case a sub-section of the generic class td). CSS is not content related and is only for diplay properties of a single element. Defining a class defines the look and feel for all elements in that class. CSS is not designed to differentiate between two elements of the same class, only to set the available parameters of all items in that class.
CSS is not the more sensible route when it comes to decision making, or counting odd and even. It is more sensible to use to set look and feel attributes.
Something needs to make the decisions on what is an odd row and what is an even row and then apply the CSS to those rows accordingly. Which is why I used javascript in my example.

On a side note, starways last "javascript-free" post is littered with javascript. It is possible to use standard CSS notation or javascript notation to define CSS sheets and classes. The onMouseOver events are being captured and, using javascript, an elements attributes are bing changed (in this case CSS attributes).
-Tarwn ------------ My Little Dictionary ---------
Reverse Engineering - The expensive solution to not paying for proper documentation

starway · Sep 1, 2002

Thank you Tarwn for teaching me CSS.

My examples don't answer the question? Let me disagree. The question was:
I'd like to find a way to have CSS apply alternating colors at "runtime" ...
The examples given does exactly that thing. As well as yours, by the way - you say the same thing with other words.

>>On a side note, starways last "javascript-free" post is littered with javascript.
It's a good manner to try to understand first what you're going to critisize.

Tarwn · Sep 2, 2002

I was not attempting to flame your posts in any manner, only point out that your were linking to posts that didn't necessarily answer the same question, and therefore could be misleading. In your examples you were looking at row selection and mouseovers rather than a runtime scheme for creating fixed alternating row colors.

>>>>On a side note, starways last "javascript-free" post is littered with javascript.
>>It's a good manner to try to understand first what you're going to critisize.

Concerning my understanding of javascript, you are using the javascript DOM to reference the styles you are changing rather than a VBScript DOM reference. The attribute names you were using are the javascript references to CSS properties in these elements.

>>OK, look here: Thread216-338918
>>I explained there how to do it without javascript.

As a note, you are using javascript references for the styles as well as javascript methods from the window and document objects.

I notice also that you started quoteing the person you were attempting to help and ended by blaming them for any problems they might be having...

As I said at the beginning, I was only attempting to clear up any confusion that may have been an effect of giving links that were not necessarilly pertinent beyond the fact that all three problems concerned CSS, javascript, and tables.
-Tarwn ------------ My Little Dictionary ---------
Reverse Engineering - The expensive solution to not paying for proper documentation

starway · Sep 2, 2002

OK, the issue is closed.
But,
Tarwn, please spend some time and read the Thread216-338918 again. Where are those JS references and quoteing? I think you mixed my posts with somebody else there.

SundancerKid · Mar 9, 2004

<tr bgcolor="<? if(bcmod($w_i,2)){echo "#99ccff";}else {echo "white";}?>">
use the BCMOD() routine to determine if even or odd row.

TenTonJim · Mar 10, 2004

I got this from

http://alistapart.com.

It addresses the TR tags within an ID'd TABLE without having to css class each TR or TD. If you read the thread of replies to the article there at alistapart, you will find about 5 different yet functional solutions... just pick what best suits you. I liked this one myself.

JimS.

=====================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Striped Tables</title>
<style type="text/css">
#playlist {
border: 1px solid #666666;
}

#playlist tbody tr td {
font-family: "lucida grande", verdana, sans-serif;
font-size: 8pt;
padding: 3px 8px;
border-left: 1px solid #D9D9D9;
}

/* Note: by placing this rule above the .selected rule
selected rows receive a style preference */
#playlist tbody tr.even td {
background-color: #edf3fe;
}

#playlist tbody tr.selected td {
background-color: #3d80df;
color: #ffffff;
font-weight: bold;
border-left: 1px solid #346DBE;
border-bottom: 1px solid #7DAAEA;
}
</style>
<script type="text/javascript">
onload = function() { stripe ('playlist') };

function stripe(id) {
var table = document.getElementById(id);
if (! table) { return; }

var trs = table.getElementsByTagName("tr");

for (var i = 0; i < trs.length; i += 2) {
trs.className += " even";
}
}
</script>
</head>
<body onload="stripe('playlist', '#fff', '#edf3fe');"><a name="top"></a>
<div id="bottle">
<h1>iTunes Stripes</h1>
<table id="playlist" cellspacing="0">
<tbody>
<tr>
<td>1</td>
<td>Lost In The Plot</td>
<td>The Dears</td>
</tr>
<tr>
<td>2</td>
<td>Poison</td>
<td>The Constantines</td>

</tr>
<tr class="selected">
<td>3</td>
<td>Plea From A Cat Named Virtute</td>
<td>The Weakerthans</td>
</tr>
<tr>

<td>4</td>
<td>Melissa Louise</td>
<td>Chixdiggit!</td>
</tr>
<tr>
<td>5</td>
<td>Living Room</td>
<td>Tegan And Sara</td>

</tr>
<tr>
<td>6</td>
<td>Speed</td>

<td>Bran Van 3000</td>
</tr>
<tr>
<td>7</td>
<td>Fast Money Blessing</td>
<td>King Cobb Steelie</td>
</tr>
<tr class="selected">
<td>8</td>
<td>Sore</td>
<td>Buck 65</td>
</tr>

<tr>
<td>9</td>
<td>Love Travel</td>
<td>Danko Jones</td>
</tr>
<tr>
<td>10</td>
<td>You Never Let Me Down</td>
<td>Furnaceface</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
=====================================

JimS.
aka
TenTonJim
Looking for work (in Florida???) I live in Washington State.
http://tentonweb.com/resume/resume.asp

newbiewonkinobie · Mar 13, 2004

Thanks for that post, TenTonJim. Here is a link to Tigra Tables that not only alternates table row colors, but also highlights them with CSS:

http://www.softcomplex.com/products/tigra_tables/demo.html

Flores

BillyRayPreachersSon · Mar 14, 2004

But to answer the original question, using *only* CSS, no it is not possible to alternate background colours of table rows without using a method similar to that of the original poster (unless your table only has 2 rows, but that's cheating ;o).

You have to either have some script, or some server-side solution in place.

Dan

manarth · Mar 14, 2004

Au contrair, you can specify alternating colours for table rows with pure css

Code:

tr:nth-child(odd) {color: #39c;}
tr:nth-child(even) {color: #3fa;}

It's an expansion of the nth child selectors (W3C).

Unfortunately, this is CSS3 - so suprise surprise - it won't work yet

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]

BillyRayPreachersSon · Mar 14, 2004

As CSS3 isn't currently adopted by all mainstream browsers, saying "you can" doesn't quite carry any weight to answer the question [and be relevant today, rather than in the future], does it?

I'll stick with my answer of "no it is not possible", until CSS3 is widely adopted.

I guess it's like saying "Yes, absolutely, you can transport instantaneously from one place to another", but with the proviso that you can only do this with a matter transporter. Good luck buying one of those in WalMart ;o)

Dan

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CSS alternating table row color 1

petey

Programmer

starway

Programmer

Tarwn

Programmer

petey

Programmer

onpnt

Programmer

starway

Programmer

Tarwn

Programmer

starway

Programmer

Tarwn

Programmer

starway

Programmer

SundancerKid

Programmer

TenTonJim

Programmer

newbiewonkinobie

Technical User

BillyRayPreachersSon

Programmer

manarth

Programmer

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor