Zebramönster med CSS3
Ett populärt sätt för att få tabeller att se mer estetiskt tilltalande ut och mer lätta att ta till sig är att skapa ett zebraliknande mönster där varannan rad är i en annorlunda färg än de angränsande raderna. Tidigare har man använt två olika klasser på varannan tabellrad för att åstadkomma denna effekt, men med CSS3 och pseudoklassen nth-child kan man göra detta mycket enklare och smidigare!
För att göra varannan cell röd kan följande kan vi använda nyckelordet ”odd” som då kommer göra att regeln endast appliceras på varannan cell.
tr:nth-child(odd) {
background-color:darkred;
}
| Stad | Del |
|---|---|
| Stockholm | Öst |
| Örebro | Mitt |
| Gävle | Norr |
| Helsingborg | Syd |
| Norr | Kiruna |
| Visby | Ö |
| Malmö | Syd |
| Gällivare | Norr |
Läs merhär.