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