I am encountering an issue with fixing the headers of multiple tables in a page within their dedicated divs. Despite trying various methods, I haven't been successful as the fixed header overflows the div. I want to confine it within the div.
Additionally, the code sample includes 2 tbody tags and 1 tfoot tag that require specific solutions.
Here is the example code:
<div class="col-sm-12 col-lg-12">
<h2 class="card-title">PRODUCT VALUE</h2>
<table class="table table-bordered table-hover table-responsive table-striped">
<thead>
<tr>
<th style="width:115px">CONDITION</th>
<th>PRODUCT NAME</th>
<th>COMMODITY CODE</th>
<th>WEIGHT</th>
<th>COST</th>
<th>QUANTITY</th>
<th>CLAIM AMOUNT</th>
<th>TYPE</th>
<th style="width:100px"> </th>
</tr>
</thead>
<tbody>
<!-- BIND PRODUCT VALUES -->
<tr ng-repeat="item in productValue.Values" ng-if="!item.IsDelete">
<!--NEW/USES-->
...
</button>
</td>
</tr>
</tbody>
<tbody>
...
</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6"> </td>
<td><strong>Total</strong></td>
<td>
<strong>{{productValue.total | currency}}</strong>
</td>
<td> </td>
</tr>
</tfoot>
</table>
</div>