JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<br/>
<input type="submit" value="Hide Associate" id="hide"/>
<input type="submit" value="Show Associate" id="show" />
<br/>
<table class="resultGridTable" cellspacing="0" id="detailContentPlaceholder_grdTransactions"
style="border-collapse: collapse;">
<tr>
<th scope="col">
</th>
<th colspan='4' rowspan="4" class='tableColGroupAssociate'>
<!-- -->
<table>
<tr><th colspan='4' class='tableColGroupAssociate'>Associate Info </th>
</tr><tr>
<th scope="col">
EmpID
</th>
<th scope="col">
SID
</th>
<th scope="col" id="showhide">
First Name
</th>
<th scope="col">
Last Name
</th>
</tr>
<tr>
<td>
123
</td>
<td>
1234
</td>
<td>
Sandy
</td>
<td>
Taylor
</td>
</tr>
<tr>
<td>
123
</td>
<td>
1234
</td>
<td>
Sandy
</td>
<td>
Taylor
</td>
</tr>
</table>
<!-- -->
</th>
<th colspan='5' class='tableColGroupTransaction'>
Financial Info
</th>
</tr>
<tr class=''>
<th>
Line #
</th>
<th scope="col">
Type
</th>
<th scope="col">
App ID
</th>
...
CSS
td
{
margin: 0 10px 0 10px;
border: 1px solid blue;
}
th
{
margin: 0 10px 0 10px;
border: 1px solid blue;
font: bold 12pt Arail;
}
JavaScript
$(document).ready(function(){
$("#show").click(function(){
$("#showhide").show();
});
$("#hide").click(function(){
$("#showhide").hide();
});
})