Table rows alternating colours?

[LouisWilkinson1980]

Hi All,

I'm creating a table which is 3 columns wide. I have merged cells in column one to group together data displayed in columns 2 and 3.

I want the table to alternate colours between all the rows in the first merged cell group and the second and so on...

I've applied a table style but this is alternating colours between each row. Does anyone know how I can achieve this?

[JenShumate]

Personally, I never use Flare's table styles because the code generated by it is incredibly bulky, and I'm OCD about that kind of thing. At any rate, here's a little code snippet that will give you alternating row colors:

Code: Select all

tr:nth-of-type(2n+1)
{
	background-color: #F3F3F3;
}

That will give every other row a gray background color. I think you might be able to adjust the (2n+1) bit to get it to do what you want, e.g. 3n+1 for every third row, 4n+1 for every fourth row. The +1 bit affects which row it starts with, so you might need to play with that too. It's also going to depend on your content. If all the merged cells have the same number of rows in them, I think you can get it to work. If the number of rows in each merged cell varies though (e.g. 3 rows in the first one, 7 rows in the second, etc), then I don't think this will help you out.

I will warn you that this code won't work in older browsers. It works fine in any current version of IE, Firefox, Chrome, etc. I don't know if it will work for PDF/Word outputs.

If you can't get that to work, the only other thing I can think is to create a style class for the row:

Code: Select all

tr.shaded
{
	background-color: #F3F3F3;
}

Then apply that style class to each row that you want to be shaded. It's a simple fix, but it may become cumbersome if you have a large amount of data.

[LouisWilkinson1980]

Thanks for your reply Jen...

Unfortunately the number of rows does vary in each section...

Does anyone know how I can achieve this?

[JenShumate]

In that case, the only thing I can think of is to create a style class for shaded rows (e.g. tr.shaded), then apply the style to each row that you want to be shaded.