2

The following is CSS for an LWC implementation.

Why does... tr:first-child { background-color: rgb(179, 250, 179); } ... have no effect in the view here? The td selectors work fine.

.actionBar{
    display: inline-block;
    margin-right: 16%;
}

td {
    padding:10px;
}

tr:first-child {
    background-color: rgb(179, 250, 179);
}

td:first-child {
    background-color: rgb(132, 241, 255);
}

td:not(:first-child) {
    background-color: rgb(243, 243, 243);
}



<template if:true={verticalTableRows}>
    <table class="table">
        <tbody>
            <template for:each={verticalTableRows} for:item="row">
                <tr key={row.fieldName}>
                    <td>
                        {row.fieldName}
                    </td>
                    <template for:each={row.companiesDataList} for:item="companyDataItem">
                        <td key={companyDataItem.length}>
                            {companyDataItem.value}
                        </td>
                    </template>
                </tr>
            </template>
        </tbody>
    </table>
</template>

Current view after suggested fix enter image description here

Current CSS after fix

.actionBar{
display: inline-block;
padding-right: 25px;
}

td {
padding-left:10px;
padding-right:5px;
padding-top:10px;
padding-bottom:10px;
}

tr:first-child > td {
background-color: rgb(179, 250, 179);
}

tr > td:first-child {
background-color: rgb(132, 241, 255);
}

Ideally, I need it to look like this, and I was having a hard time with alternating grey rows as seen here as well. enter image description here

Ok, I just found the likely problem. The TR I want to affect is highlighted in blue here. Note it has a parent TR. I don't have anything in my code to create that parent; I guess LWC adds that for some strange reason. enter image description here

2 Answers 2

1

You need to add the style on td element of first row, like this

tr:first-child > td {
    background-color: rgb(179, 250, 179);
}

However because of the above rule, your second css (the top-right td will appear in green) will be overridden, to avoid override you can make the 2nd css more specific like this:

tr:first-child > td {
    background-color: rgb(179, 250, 179);
}

tr > td:first-child {
    background-color: rgb(132, 241, 255);
}

Note: Since both css are now of same precedence, so the order in which these css are defined is important.

6
  • One should avoid the use of important, as it can be troublesome in many cases. For your specific use case, you might consider suggesting tr > td:first-child as an alternative to make the column more specific than the row. Demo.
    – sfdcfox
    Commented Jan 17, 2023 at 4:13
  • Thanks for the suggestion @sfdcfox, updated my answer along with considerations Commented Jan 17, 2023 at 4:27
  • thank you both, @AnmolKumar. I've added the following sections to my original post... Current view after your suggested fix here, Current CSS after your suggested fix, and Ideal view including alternating rows. You'll see your suggested fix did not color the header TDs going across the top. Commented Jan 18, 2023 at 21:48
  • @AnmolKumar Could you take a look at my comment here when you get a chance? Commented Jan 19, 2023 at 18:36
  • @sfdcfox please see in my original post "Ok, I just found the likely problem." Commented Jan 19, 2023 at 22:08
0

Thanks sfdcfox for answer in comment to anmol's answer (which was close)

.actionBar{
    display: inline-block;
    padding-right: 16%;
}

td {
    padding:10px;
    background-color: rgb(243, 243, 243);
}
tr:first-child > td {
    background-color: rgb(142, 255, 142);
}
tr:nth-child(2n) > td {
    background-color: rgb(226, 226, 226);
}
tr > td:first-child {
    background-color: rgb(132, 241, 255);
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .