I have designed a table with tbody consisting of 2 tr elements. One tr is used for hiding/showing data.
I am trying to keep the Table header fixed while only scrolling the table body. However, as I am using angular js ng-repeat on the tbody, I am encountering difficulty in achieving the desired scrolling effect.
The desired output should be similar to this example: Sample output with scrollable table body
My current Table structure looks like this:
<thead>
</thead>
<tbody ng-repeat="a in arr">
<tr>
</tr>
<tr>
</tr>
<tbody>
HTML FILE
<thead>
<tr>
<th style="text-align: center;">Edit</th>
<th style="text-align: center;">Case ID</th>
<th style="text-align: center;">Company Name</th>
</tr>
<tr>
<th colspan="8"><input class="form-control"
placeholder="Search ..." type="text" id="search" ng-
model="search.compyNmeEnteredByBDO"/></th>
</tr>
</thead>
<tbody ng-repeat="newOpportunity in opportunitycopy >
<tr>
<td>
<label> <input type="checkbox" value="" ng-
model="newOpportunity.isSelected"> <span
class="cr"><i class="cr-icon glyphicon
glyphicon-ok"></i></span>
</label>
</td>
<td>
{{newOpportunity.id}}
</td>
<td>
{{newOpportunity.compyNmeEnteredByBDO}}
</td>
</tr>
<tr ng-show="newOpportunity.hidestatus">
<td colspan="8">
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="ibox" id="mailbox-container">
<div class="mailbox-header d-flex justify-content-between"
style="border-bottom: 1px solid #e8e8e8;">
<div>
<h5 class="inbox-title">Details</h5>
</div>
</div>
<div class="mailbox-body">
<form>
<div class="row">
<div class="col-sm-2 form-group">
<label>Quantum</label> <input type="text" readonly
class="form-control" value="{{newOpportunity.quntm}}">
</div>
</div>
<div class="row">
</div>
<div class="row">
<div class="col-sm-2 form-group">
<label>Remarks</label> <input type="text" readonly
class="form-control" value="{{newOpportunity.remarks}}">
</div>
</div>
</div>
</div>
</div>
</div>
</tr>
</tbody>