blog

Stripped table that starts with a header

This is the code I use to strip-color rows on a table:

.c-table--striped {
    tbody tr {
        &:nth-of-type(odd) { background-color: aliceblue; }
    }
}

But when I add both thead and tbody in the mix both header and first data row end with the same color. I fixed that like this:

.c-table--striped {
    tr:nth-of-type(odd) {
        background-color: aliceblue;
    }
    thead + tbody tr {
        &:nth-of-type(odd) { background-color: white; }
        &:nth-of-type(even) { background-color: aliceblue; }
    }
}

Update 2021-03-16:

After snooping around Bootstrap code, I have a twist on this:

.c-table--striped {
    tbody:first-child tr {
        &:nth-of-type(odd) { background-color: aliceblue; }
    }
    thead + tbody tr {
        &:nth-of-type(even) { background-color: aliceblue; }
    }
}