What steps can be taken to avoid the table row from getting hidden behind the table header?

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. 

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

Answer №1

Although my response may be tardy, I encountered the same issue before. The culprit lies in the table header having an unseen border that must be eliminated to avoid the appearance of an additional pixel behind it. To address this succinctly, utilize the following inline solution:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to ensure that an image functions as a clickable hyperlink upon hovering over it?

I am facing a challenge in making an image function as a link. Unfortunately, I have identified the problem, but finding a solution is proving to be quite elusive. When the cursor hovers over the image, it undergoes a slight darkening effect and some word ...

htmlcss

I am in search of a clean and efficient method to modify the class of a link that triggers an HTMX request in Django. Perhaps something like "auto-refresh" or a similar solution would be ideal

I've encountered an issue with HTMX in Django. The page consists of two main components: a list of categories and the content that is displayed when a category is clicked. Initially, everything was working smoothly with standard htmx functionality. H ...

javascriptcssdjangodjango-templateshtmx

text box with an immobile header

As the browser window size decreases, the layout changes. However, when scrolling down, the search text box moves up and is no longer visible due to its lack of fixation. How can I make the search text box stay fixed as I scroll down? I tried implementing ...

javascriptjqueryhtmlcss

Creating visually appealing Jquery-ui tab designs

Trying to customize the jquery tabs, I experimented with styling them to my liking. One thing I did was attempt to reduce the size of the tabs by adding a height:45px; to the UI stylesheet shown below. .ui-tabs-vertical .ui-tabs-nav li { clear: left; ...

jqueryhtmlcss

What is the best method for managing file storage and retrieval in web applications that only run on the client-side?

I'm currently working on an application where users can create their own data. Without a backend or database, all the information is stored within the user's session. My preferred solution involves: User interacts with the app, clicks "Save", ...

javascripthtmlofflinehtml5-filesystem

The alignment of the Unicode character is off and is not centered within the button

Upon implementing a unicode character as a button, I've observed that the alignment of the character is not centered properly (both horizontally and vertically) within the button. It's puzzling why this misalignment occurs even after setting padd ...

htmlcssunicode

Using props as classnames in next.js applications

I am currently attempting to create a dynamic header for each page of my app that changes color based on the current page. Here is my approach: <Header className="headerBitcoin"></Header> My goal is to have the same header component ...

javascriptcssreactjsnext.jscss-modules

Creating a list of font sizes for each <p> tag in my HTML document

I am looking to create an array containing the font sizes of all the p tags in my HTML document. How can I specifically target only the p elements and not their parent elements? ...

javascripthtmlcss

Limiting zero is ineffective when it comes to pop-up issues

Hey there, I'm looking to prevent users from inputting zero and dot in a specific field, which is currently working fine. However, when the field is within a pop-up, the code below doesn't seem to work. <script> $('#name').keyp ...

javascriptjqueryhtmlcss

Dynamic styles object for React components with inline styles

I have a styles object let styles = { step_div:{ height:'150px', } } I'm trying to display multiple div elements with different colors using React class Layout extends React.Component{ constructor(props) { super(props); ...

javascripthtmlcssreactjsinline

Showcasing menu options in a double-column layout - MUI Menu

Just starting out with React. I'm using MUI menu to display items in two columns, but I've noticed a significant gap between the menu items when using grid display with repeat 2 and 1fr. display:'grid' , gridTemplateColumns : 'repe ...

cssreactjsmaterial-ui

Design a layout featuring an array of boxes in varied sizes

Is it possible to create a grid layout with 3 columns containing div boxes of varying heights, all populated with content extracted from a database? ...

htmlcss

Executing JavaScript function from external SVG file globally

I am working on an HTML page that includes an external JavaScript module <script type="text/javascript" src="js/js.js"></script> and also an external SVG map called "img/map.svg". My goal is to create clickable objects on the map that will t ...

javascriptjqueryhtmlsvg

Utilizing the 'input' method to modify the key of an array object within specified elements in a Vue.js application

i am looking to implement an input field that can be used to edit the title of the currently selected element component (the selection is made by clicking). The challenge here is to have a single input that works for each individually selected element. I h ...

javascripthtmlvue.jsvue-component

Is there a way I can maintain the active state after clicking on a link?

Is there a way to maintain an active element state when navigating to another page after clicking a link? I am wondering if it is possible to use JavaScript to remove the active state from one link and apply it to the next one. I am facing some challenges ...

javascripthtmlcss

Tips for customizing the appearance of a functional stateless component in Reactjs using class objects

I am looking to create a functional stateless component in ReactJs following the guidelines outlined here. const MyBlueButton = props => { const styles = { background: 'blue', color: 'white' }; return <button {...props} sty ...

cssreactjsmaterial-uijsx

What is the best way to implement custom sorting for API response data in a mat-table?

I have been experimenting with implementing custom sorting in a mat-table using API response data. Unfortunately, I have not been able to achieve the desired result. Take a look at my Stackblitz Demo I attempted to implement custom sorting by following t ...

htmlangulartypescript

Click to reveal sliding menu bar

Trying to create a sliding menu bar (.top-bar) that activates when clicking an arrow (#hide), causing the arrow to also slide up and switch from an up arrow to a down arrow. Here is my unsuccessful attempt: $(document).ready(function(){ $("#hide").c ...

jqueryjquery-uihtmlcss

index.html: using jquery for selecting colors

I attempted to integrate a jQuery plugin into my application, but it doesn't seem to be working. In the head section of my code, I have included: <link rel="stylesheet" media="screen" type="text/css" href="./style/colorpicker.css" /> <script ...

jquerycss

After filling out the form, the user's entered information is instantly shown on the same page

I want to create a form where my friend can input information that will be displayed on the same page. For example, when he enters the title in a text field and clicks submit, it should appear in the title box. Additionally, he should be able to enter va ...

jqueryhtmlcssajax