CODEWITHSUNDEEP
htmlcss
gman
gman

Reputation: 167

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

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.

Once you start scrolling you can see the text appearing above the <th>

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

Upvotes: 1

Views: 1511

Answers (1)

Davileet T
Davileet T

Reputation: 46

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

Upvotes: 3

Related Questions