Previous Message
Next Message

Table row

Sent by Alex James on 14 February 2005 10:10


Other contributors wrote:
> http://alistapart.com/articles/zebratables

Found the JS slowed the page enormously with lots of table data:

Try this if your styling code in a JSP: 

	<%
		String LIGHT_COLOR = "";
		String DARK_COLOR = "odd";
		String currentColor = LIGHT_COLOR;
		int i = 0;
	%>		
			
	<logic:iterate>
		<%
			if ( i % 2 == 0)
			{
				currentColor = DARK_COLOR;
			}
				else
			{
				currentColor = LIGHT_COLOR;
			}
			i++;
		%>
		<tr class="<%=currentColor %>">	
		<td></td>
		</tr>
	</logic:iterate>	

In the CSS something like this: 

    #tableName tbody tr.odd  td {
      background-color: #ccc;
    }

Also add a declaration for the light color rows:

    #tableName tbody tr td {
      background-color: #fff;
    }

HTH

aj



> -----Original Message-----
> From: Bob Easton [EMAIL-REMOVED]]
> Sent: 14 February 2005 00:13
> To: [EMAIL-REMOVED]
> Cc: [EMAIL-REMOVED]
> Subject: Re: [css-d] Table row
> 
> 
> [EMAIL-REMOVED] wrote:
> > 
> > Hi all,
> > 
> > If I have a table and i wanted to to rotate the colouring 
> of each table row
> > 
> > is the correct way to css this way
> > 
> > TR style=etc
> > 
> > or do i have do do it for each TD
> > 
> > tr
> >    td style
> > 
> The usual way to do this is with a class on each table row. 
> Consider the 
> case of even numbered rows bsing one color and odd numbered rows 
> another.  Then you would have:
> 
> <tr class="odd"> ... </tr>
> <tr class="even"> ... </tr>
> 
> and CSS of:
> .even {background-color:blue; color:white;}
> .odd {background-color:white; color:blue;}
> 
> Since this is tedious to code, an article at the A List Apart site 
> offers a script to make things easier.
> 
> <http://alistapart.com/articles/zebratables>
> 
> 
> -- 
> Bob Easton
> 
> ______________________________________________________________________
> css-discuss [EMAIL-REMOVED]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> 
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Possibly related: