如何防止此表格行出现在表格标题后面？

Question

My goal is to apply sticky headers to a table using a pure CSS approach.

Using this as a guide. Table fixed header and scrollable body

When the page renders the table looks fine, when I start scrolling you can see a sliver of the data above the table header.

 <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>

Answer 1

I know its a bit late to answer, but I had this exact issue. The problem is the table header has an invisible border that needs to be removed in order to not see that extra pixel behind it. The inline solution for brevity sake:

<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(style="border-style:hidden")>
. . .