0

Wha can I do to highlight my first complete column of the table with a background color? Below is my code and screenshot of the table. Problem is that I'm using <template for:each={con.listval} for:item="item"> to fetch records so if I use style for <div> inside this template then it highlights both column.

enter image description here

.HTML

<table class="slds-table slds-table_cell-buffer slds-table_bordered">
                    <thead>
                        <tr class="slds-line-height_reset">
                            <th class="" scope="col">
                                <div class="slds-truncate" title="Field Names">Field Names</div>
                            </th>
                            <th class="" scope="col">
                                <div class="slds-truncate" title="Primary Record">Primary Record</div>
                            </th>

                        </tr>
                    </thead>
                    <template for:each={listOfField} for:item="con">
                        <tbody key={con}>
                            <tr key={con}>
                                <th style="height: 25px">
                                    <div>{con.key}</div>
                                </th>

                                <template for:each={con.listval} for:item="item">
                                    <th key={item} scope="col" data-key={item}>
                                        <div class="slds-truncate" title={item.con}>
                                            <c-child-record-component objrec={item} fieldname={con.key}
                                                fieldvalue={item.fieldValue} recordid={item.radioButton}
                                                fieldvalueforlookup={item.fieldValuesForLookup}
                                                firstrecordid={firstRecordId} onfieldselection={onFieldSelection}>
                                            </c-child-record-component>
                                        </div>
                                    </th>
                                </template>
                            </tr>
                        </tbody>
                    </template>
                </table>
0

I am assuming this as your first column

th style="height: 25px; background-color:red !important;"

div>{con.key}</div

/th

Try this out, moreover i am subtle about the css atrributes which you used in table tag

class="slds-table slds-table_cell-buffer slds-table_bordered"

Try removing them after above code once, sometimes slds attributes does not allow other css to work, basically it overrides.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.