Lance B Lance B - 6 months ago 9
CSS Question

How do I make the background-color reoccurring for each table?

I want the 'zebra' look for each table. So the background colors already setup for each table need to be reoccurring, not solid as they are now. How do I make it so that every other table row is white?

http://jsfiddle.net/Lance_Bitner/v8buo90L/

.tabs > div table tr td {
background: rgba(232, 240, 250, .5);
}
.tabs > div:nth-child(2) table tr td {
background: rgba(254, 217, 209, .5);
}
.tabs > div:nth-child(3) table tr td {
background: rgba(230, 198, 229, .5);
}

Answer

No jquery needed just add :nth-child(even) to each line as so and you're done.

.tabs > div table tr:nth-child(even) td {
  background: rgba(232, 240, 250, .5);
}

.tabs > div:nth-child(2) table tr:nth-child(even) td {
  background: rgba(254, 217, 209, .5);
}

.tabs > div:nth-child(3) table tr:nth-child(even) td {
  background: rgba(230, 198, 229, .5);
}

Your JQuery was fine too, just needed to remove the relevant css (.tabs > div:nth-child(*) table tr td) and it worked, though they were all shades of blue.