How can I prevent this table row from appearing behind my table header?

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>

Maybe it will be better for everyone that you provide a real example using [stackblitz](https://stackblitz.com/) — johannchopin, Jan 14 '20 at 22:18

score 3 · Accepted Answer · answered Mar 20 '20 at 17:56

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")>
. . .

Thx Davileet, i'll check it out and update as the answer if it works. — gman, Mar 23 '20 at 16:16

How can I prevent this table row from appearing behind my table header?

1 Answers1