logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 09-05-2011, 05:51 AM   #1
UDPride
 
Join Date: Sep 2011
Posts: 1
Default Shade every 10 rows in a table

Hi. New member, first question!

Im using DW CS5.5

Basically I have a large table of 300+ rows. Because the rows contain data with a row number in each row (ranking, first column), the table would be easier to read if every 10 rows were shaded. 1-10, 21-30, 41-50, and so on.

Id like to do it in some sort of head or css way, rather than manually apply the shading to each section of rows, mainly because I use a sortable javascript for the table header and Id like the shading to remain static in spite of the sorts. The data is also fluid so there might be 325 rows one day and 333 rows the next.

Any way to accomplish this with html/css markup? Thanks!
UDPride is offline   Reply With Quote
Old 09-05-2011, 07:54 AM   #2
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

You could use CSS3 selectors for this and then especially the :nth-child pseudo class. In your case this example will select each 10th row in your table (thus row 10 - row 20 - row 30 - etc)
Code:
table tr:nth-child(10n+10) {styles here}
This example will select the even rows of the table:
Code:
table tr:nth-child(even) {styles here}
Here's a good reference for all the :nth-child pseudo classes.
http://reference.sitepoint.com/css/u...ildexpressions

But IE8 and below don't understand these cool new pseudo classes, so you will need some JavaScript for them in order to work:
http://selectivizr.com/

If you want to know which value you'll need then this :nth-child tester can come in handy;
http://css-tricks.com/examples/nth-child-tester/
__________________
www.gentlemedia.nl

Last edited by gentleone; 09-05-2011 at 12:08 PM.. Reason: added :nth-child tester & example for targeting each 10th row of the table
gentleone is offline   Reply With Quote
Old 09-05-2011, 12:38 PM   #3
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Okay... after a better read of your post I see the example I gave you is not solving your problem. Sorry, I shoud have read better in the first place.

If you want to target row 1-10, 21-30, 41-50, etc. then it is not possible with the :nth-child pseudo class if you have one table. However it can work if you would build the table with nested tables. I will do a little experiment myself with it, so I'll let you know the outcome.
__________________
www.gentlemedia.nl

Last edited by gentleone; 09-05-2011 at 10:34 PM..
gentleone is offline   Reply With Quote
Old 09-05-2011, 01:49 PM   #4
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Perhaps it's not ideal for you cause I dont know the whole page of you, but it does work like this. Here you go:
http://jsfiddle.net/gentlemedia/ba6Gx/1/
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 07:28 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com