$("input:checkbox:not(:checked)").each(function() {
var column = "table ." + $(this).attr("name");
$(column).hide();
});
$("input:checkbox").click(function() {
var column = "table ." + $(this).attr("name");
$(column).toggle();
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p style="margin-left:15px;">Additional information select below:</p>
<p style="display:inline; margin-left:15px">
<input type="checkbox" name="vendor" />Vendor Details
<input type="checkbox" name="ONX" />Quantity Level
<input type="checkbox" name="Cost" />Cost Detail
<!-- <li><input type="checkbox" name="d" />d</li> -->
</p>
<table id="testTable" class="fixed_headers">
<caption>
<u><h2 >ITEM ONHAND QUANTITIES & GOODS IN TRANSACTION</h2></u>
</caption>
<thead>
<tr class="header" style="background-color: #3f91bd;color:white; /* position: absolute; width: 83%; */">
<th class="first">ITEM CODE</th>
<th class="second">ITEM NAME</th>
<th class="third">UNIT</th>
<th class="headcol">ON HAND QTY</th>
<th class="headcol">GIT</th>
<th class="headcol">ATP</th>
<th class="ONX" name="ONX">ONX LOW LMT</th>
<th class="ONX" name="ONX">ONX HIGH LMT</th>
<th class="ONX" name="ONX">ONX RE-ORDER-LEVEL</th>
<th class="Cost">AVG COST</th>
<th class="Cost">LAST PO PRICE</th>
<th class="vendor" name="vendor">V_CODE</th>
<th class="vendor">MAIN_VENDOR</th>
<th class="vendor">VENDOR_TYPE</th>
<th class="vendor">Vendor Mx LEAD TIM</th>
</tr>
</thead>
<tbody style="display: block; border: 1px solid green; overflow-y: scroll; overflow-x: scroll; height:400px; width:850px">
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td class="ONX">aaa</td>
<td class="ONX">aaa</td>
<td class="ONX">aaa</td>
<td class="Cost">aaa</td>
<td class="Cost">aaa</td>
<td class="vendor">aaa</td>
<td class="vendor">aaa</td>
<td class="vendor">aaa</td>
<td class="vendor">aaa</td>
</tr>
<tr>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
<td class="ONX">bbb</td>
<td class="ONX">bbb</td>
<td class="ONX">bbb</td>
<td class="Cost">bbb</td>
<td class="Cost">bbb</td>
<td>class="vendor">bbb</td>
<td class="vendor">bbb</td>
<td class="vendor">bbb</td>
<td class="vendor">bbb</td>
</tr>
</tbody>
</table>The structure of the table header and body is not properly aligned. I am looking for suggestions to rectify this issue and ensure that each <tbody> column corresponds correctly with its respective <thead> column.