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>