PDA

View Full Version : Shade every 10 rows in a table


UDPride
09-05-2011, 05:51 AM
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!

gentleone
09-05-2011, 07:54 AM
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)

table tr:nth-child(10n+10) {styles here}
This example will select the even rows of the table:

table tr:nth-child(even) {styles here}
Here's a good reference for all the :nth-child pseudo classes.
http://reference.sitepoint.com/css/understandingnthchildexpressions

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/

gentleone
09-05-2011, 12:38 PM
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.

gentleone
09-05-2011, 01:49 PM
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/