Rijen met alternerende achtergrondkleur

Rijen om en om kleuren helpt de gebruiker de rijen te volgen. Maar gebruik een kleur die subtiel afwijkt van de andere rijen zodat de tabel er als een geheel blijft uitzien.

Probleem

Het kan moeilijk zijn om je ogen gefocust te houden op een bepaalde rij in een grote tabel. Met het weergeven van tabelrijen in afwisselende kleuren help je gebruikers om gefocust te blijven op een bepaalde rij.

Oplossing

Met behulp van de CSS3 nth-child selector, kunnen voor elke andere rij een andere stijl toe voegen.

Voorbeeld:

table.spreadsheet tr:nth-child(odd) {
    background-color: #dfe7f2;
    color: #000000;
}

Met dit als resultaat:

2017-01-08 16:28:34