Kevin Powell - Community•3mo ago

Striped table

Hello there, are there any better way of doing a striped table? this works but I feel like I have overcomplicated it https://codepen.io/Etsi0/pen/XWvXoeM

17 Replies

ἔρως•3mo ago

what are you even trying to do? im not reading 2kb of selectors to understand what it is trying to do, im sorry

Etsi0OP•3mo ago

i'm making a striped table and it works like it should, but i feel like i have overcomplicated it

ἔρως•3mo ago

from the result, it seems like you want to apply the same striping to the thead and tbody, but you want to continue the same stripping order too

Etsi0OP•3mo ago

yes, exactly

ἔρως•3mo ago

why have a thead then? for the bold and centered text?

Etsi0OP•3mo ago

idk, i was just thinking that it was maybe more semantically correct :idkpepe:

ἔρως•3mo ago

it is but usually the thead doesnt have the same background color as the stripping because its confusing as hell

Jochem•3mo ago

you can usually assume a thead has a single row in it too

ἔρως•3mo ago

indeed and when it has multiple, the background is the same

Jochem•3mo ago

so you can just set the color for the thead however you want, and then start the alternating colors underneath for the tbody with the other color yup. Cause the thead should be visually distinct

ἔρως•3mo ago

actually, you dont need that you can just set a background color and give the odd/even a background separately so, basically, you need 3 selectors: - table - background of the odds comes here - table > thead - background of all the thead rows - table > tbody > tr:nth-child(even) - the stipped background comes here HOWEVER.... you should use this instead, for browsers that support it: table > tbody > tr:nth-child(even of :not([hidden])) this lets you hide rows with the hidden attribute and the stripping continues

Etsi0OP•3mo ago

good to know, thanks for the tips

ἔρως•3mo ago

you're welcome

Choo♚𝕂𝕚𝕟𝕘•3mo ago

That could be simplified very substantially to this:

thead tr:nth-child(odd),
tbody tr:nth-child(even) {
  background-color: #f0f0f0;
}

thead tr:nth-child(even),
tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

thead tr:nth-child(odd),
tbody tr:nth-child(even) {
  background-color: #f0f0f0;
}

thead tr:nth-child(even),
tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

Choo♚𝕂𝕚𝕟𝕘•3mo ago

https://codepen.io/chooking/pen/xxvZeEr

ChooKing

CodePen

Striped table

...

Choo♚𝕂𝕚𝕟𝕘•3mo ago

The thead only has one row, so that could be simplified even more, but I kept that original part from your code due to laziness.

ἔρως•3mo ago

that is smart but you know what is even smarter? replace the first selector with table the default background is transparent, and this way, you are making use of that and only style what needs to be styled but yeah, well done

Gaming

Programming

Striped table