简体   繁体   中英

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);
    }

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM