JSFiddle - React, Tailwind, and code Playground
HTML
<table class="resultGridTable" cellspacing="0" id="detailContentPlaceholder_grdTransactions"
style="border-collapse: collapse;">
<tr class="first">
<th scope="col">
</th>
<th colspan='4' class='tableHeaderColGroup'>
Associate Transaction Info
</th>
<th colspan='5' class='tableHeaderColGroup'>
Financial Transaction Info
</th>
<th colspan='2' class='tableHeaderColGroup'>
Success Dates
</th>
<th colspan='2' class='tableHeaderColGroup'>
Tracking Dates
</th>
<th colspan='1' class='tableHeaderColGroup'>
Test
</th>
<th colspan='5' class='tableHeaderColGroup'>
Transaction Info
</th>
<th colspan='2' class='tableHeaderColGroup'>
Reference Amts
</th>
<th colspan='12' class='tableHeaderColGroup'>
Daily Tax or Payroll Adjustments Info
</th>
</tr>
<tr class="second">
<th>
Line #
</th>
<th scope="col">
EmpID
</th>
<th scope="col">
Ref
</th>
<th scope="col">
First Name
</th>
<th scope="col">
Last Name
</th>
<th scope="col">
Type
</th>
<th scope="col">
App ID
</th>
<th scope="col">
Batch ID
</th>
<th scope="col">
Correlation ID
</th>
<th scope="col">
Transaction ID
</th>
<th scope="col">
Posted Date
</th>
<th scope="col">
Completed Date
</th>
<th scope="col">
Updated
</th>
<th scope="col">
Rejected
</th>
<th scope="col">
Yes/No
</th>
<th scope="col">
Invoice ID
...
CSS
.first
{
border: 1px solid red;
}
.second
{
border: 1px solid orange;
}
.dataRow
{
border: 1px solid blue;
}
td
{
padding: 5px 5px 5px 5px;
}
th
{
padding: 5px 5px 5px 5px;
}
JavaScript
$('tr').each(function(index) {
if (index > 1){
$($(this).children()[1]).css("background-color","Red");
}
$($(this).children()[1]).css("width","300px");
});