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
var table = $('#detailContentPlaceholder_grdTransactions'),
trs = table.find('tr'),
headTr = table.find('.second'),
empHeader = $($(headTr).children('th')[1]);
table.width(table.width() + 300);
empHeader.css('background-color', 'red');
empHeader.width(300);
#detailContentPlaceholder_grdTransactions > tbody > tr.second > th:nth-child(2)