Kolommen met alternerende achtergrondkleur

Dat is iets moeilijker dan voor rijen.

Probleem

We zijn gewoon aan alternerende kleuren voor rijen in een tabel. Voor kolommen komt dat niet zoveel voor. Soms kan dat toch nuttig zijn als de kolomwaarden enigszins een groep vormen. In het voorbeeld hieronder vormen de waarden voor groeten, nagerecht enz. in zekere zin een groep en kan een alternerende kleur de leesbaarheid vergroten. Want daar draait het natuurlijk altijd om.

Design

In HTML Serieus! hebben we het <col> element leren kennen. Daarmee konden we de kolommen in CSS selecteerbaar maken. Als we die in onze tabel toevoegen wordt het stijlen van alternatieve kleur voor kolommen wel heel gemakkelijk. We kunnen dan ook de :nth-child selector gebruiken.

Oplossing

HTML

<body>
        <table class="spreadsheet">
            <col />
            <col />
            <col />
            <col />
            <tr>
                <th scope="col">Hoofdgerecht</th>
                <th scope="col">Bijgerecht</th>
                <th scope="col">Groenten</th>
                <th scope="col">Nagerecht</th>
            </tr>
            <tr>
                <td>Biefstuk</td>
                <td>Frieten</td>
                <td>Sla</td>
                <td>Crème brulée</td>
            </tr>
            <tr>
                <td>Kabeljauw</td>
                <td>Aardappelen</td>
                <td>Paddestoelen</td>
                <td>Appeltaart</td>
            </tr>

CSS

table col:nth-child(odd) {
    background-color: #80c9ff;
    color: #000;
}

table col:nth-child(even) {
    background-color: #80B0ff;
    color: #000;
}

En dit is het resultaat. De kleuren zijn wat overdreven, maar het is slechts een voorbeeld:

In een tweede voorbeeld willen we alleen de prijskolommen in alternerende kleur plaatsen. Dus alterneren pas vanaf een bepaalde kolom.

Vermits we de kolomtitels niet willen mee willen alterneren, kunnen we de col niet in de selector opnemen. Door de td in de selector op te nemen kunnen we een onderscheid maken tussen kolomtitels en datakolommen.

See the Pen Multimedia - CSS - Tabelkolommen in alternerende kleuren 2 by Jef Inghelbrecht (@jef) on CodePen.

2017-01-08 16:28:30