Highlight first complete column with background color in table

Question

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.

.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>

Answer 1

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.