How to customize the first row of every column in HTML?

Question

I want to customize first row of every column. I tried many HTML and CSS tricks but it's not working with me.

The attached image will explain further. I am using a table plugin in WordPress so I can't add JavaScript or id to one single column.

Answer 1

Try this:

table > * > tr > td:first-child{
    /* css styles */
}

Here * is used in place of thead and tbody.

But sometimes using * is expensive for performance.. so, if you care about performance go with this:

table > thead > tr > td:first-child, table > tbody > tr > td:first-child{
     /* css styles */
}

or else

There is a trick which I like to share here which doesn't require :first-child

table > thead > tr > td + td, table > tbody > tr > td{
    /* normal styles */
}

table > thead > tr > td, table > tbody > tr > td{
    /* first-child styles */
}

The above trick worked for me everytime because the the first-child is not a sibling of any other td element :). I mean there is no other element above the first-child element. but I prefer using :first-child though.