I am aiming to implement sticky headers for a table using only CSS.
You can refer to this link for guidance: Table fixed header and scrollable body
Everything looks good when the page loads, but as soon as I start scrolling, a sliver of data appears above the table header.
https://i.sstatic.net/aRsHk.png
<div class="large-12 columns" ng-show="$ctrl.filteredParticipantsDt.length != 0">
<div style="max-height: 260px; overflow: auto;" class="tableFixHead">
<table border="1" style="width: 100%" >
<thead>
<tr>
<th><a ng-click="$ctrl.orderByField='ID_NBR'; $ctrl.reverseSort = !$ctrl.reverseSort" refresh-session>IDENTIFIER
<span ng-show="$ctrl.orderByField == 'ID_NBR'"><span ng-show="!$ctrl.reverseSort" class="fi-arrow-up"></span><span ng-show="$ctrl.reverseSort" class="fi-arrow-down"></span></span></a></th>
<th><a ng-click="$ctrl.orderByField='CNCAT_LST_FRST_M_I'; $ctrl.reverseSort = !$ctrl.reverseSort" refresh-session>PERSON
<span ng-show="$ctrl.orderByField == 'CNCAT_LST_FRST_M_I'"><span ng-show="!$ctrl.reverseSort" class="fi-arrow-up"></span><span ng-show="$ctrl.reverseSort" class="fi-arrow-down"></span></span></a></th>
<th><a ng-click="$ctrl.orderByField='SHRT_DESC'; $ctrl.reverseSort = !$ctrl.reverseSort" refresh-session>ROLE
<span ng-show="$ctrl.orderByField == 'SHRT_DESC'"><span ng-show="!$ctrl.reverseSort" class="fi-arrow-up"></span><span ng-show="$ctrl.reverseSort" class="fi-arrow-down"></span></span></a></th>
<th><a ng-click="$ctrl.orderByField='EFF_DT'; $ctrl.reverseSort = !$ctrl.reverseSort" refresh-session>EFFECTIVE DATE
<span ng-show="$ctrl.orderByField == 'EFF_DT'"><span ng-show="!$ctrl.reverseSort" class="fi-arrow-up"></span><span ng-show="$ctrl.reverseSort" class="fi-arrow-down"></span></span></a></th>
<th><a ng-click="$ctrl.orderByField='END_DT'; $ctrl.reverseSort = !$ctrl.reverseSort" refresh-session>END DATE
<span ng-show="$ctrl.orderByField == 'END_DT'"><span ng-show="!$ctrl.reverseSort" class="fi-arrow-up"></span><span ng-show="$ctrl.reverseSort" class="fi-arrow-down"></span></span></a></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="a in $ctrl.filteredParticipantsDt|orderBy:$ctrl.orderByField:!$ctrl.reverseSort"
ng-click="$ctrl.setSelected(a)"
ng-class="{Highlight: a.PCR_ID === $ctrl.Selected.PCR_ID, endDatedRow: a.END_DATED_IND == 'Y'}" refresh-session>
<td>{{a.ID_NBR}}</td>
<td>{{ a.CNCAT_LST_FRST_M_I }}</td>
<td>{{a.SHRT_DESC}}</td>
<td>{{a.DISPLAYEFF}}</td>
<td>{{a.DISPLAYEND || ''}}</td>
</tr>
</tbody>
</table>
</div>
</div>