Data in the scrollable table is displayed even with a sticky header

Here is the current issue: The content remains slightly visible when scrolled behind the header. How can I fix this so that the content is not visible when scrolled behind the sticky header?

https://i.sstatic.net/yZMDB.png

.tableUpdates {
        overflow-y: auto;
        height: 250px;
    }

    .tableUpdates thead th {
        position: sticky;
        margin-top:0px;
        top: 0;
        background: #DC3545;
    }
<div class="col-md-4 pr-0 tableUpdates">
    <table class="table table-bordered table-hover">

           <thead class="bg-danger text-light">
               <tr>
                  <th>Header</th>
               </tr>
            </thead>
            
            <tbody>
               .....some rows
            </tbody>
    </table>
</div>

htmlcssbootstrap-4html-tablescrollable

Answer №1

This strange quirk occurs with the use of table and th elements. If either element has a top border, it causes an unusual scrolling behavior where the border does not stick, creating a gap.

An effective hack to address this issue is to override the border-top property for both the table and th elements by setting the width to 0.

CSS

#myTable {
    border-top: 0 solid black;
}

#myHeader {
    border-top: 0 solid black;
}

HTML

<div class="col-md-4 pr-0 tableUpdates">
    <table id="myTable" class="table table-bordered table-hover">

           <thead class="bg-danger text-light">
               <tr>
                  <th id="myHeader">Header</th>
               </tr>
            </thead>
            
            <tbody>
               .....some rows
            </tbody>
    </table>
</div>

However, keep in mind that this will remove the top border entirely...

Answer №2

Adjust the sticky header slightly in the direction of the visible content. For example, if the sticky header is displaying content from the top, move the header up by a pixel or two using the top property in CSS. This adjustment will prevent any content from leaking through the header.

Answer №3

Make sure to include the top:-10px; property in the thead element.

.tableUpdates {
  overflow-y: auto;
  height: 250px;
}

.tableUpdates thead th {
  position: sticky;
  margin-top: 0px;
  top: 0;
  background: #DC3545;
}
<div class="col-md-4 pr-0 tableUpdates">
  <table class="table table-bordered table-hover">

    <thead class="bg-danger text-light">
      <tr>
        <th>Header</th>
      </tr>
    </thead>

    <tbody>
      .....some rows
    </tbody>
  </table>
</div>

Answer №4

To achieve a sticky position

Apply a new style to the top header

<div class="col-md-4 pr-0 tableUpdates">
<table class="table table-bordered table-hover">

       <thead class="bg-danger text-light">
           <tr>
              <th class="sticky-header"&rt;Header</th>
           </tr>
        </thead>
        
        <tbody>
           .....some rows
        </tbody>
</table>
</div>

Add specific styling for class sticky-header

.tableUpdates {
    overflow-y: auto;
    height: 250px;
}

.tableUpdates thead th {
    margin-top:0px;
    top: 0;
    background: #DC3545;
}
.sticky-header {
   position:'fixed' # fixed positioning for the header
   z-index:999  # ensure it stays on top of other content
}

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

Determine the attribute value based on the source

Is there a method to retrieve the value of the swap-section attribute based on a specific image source? <div class="ig_gallery_right_img" style="overflow-y: scroll"> <img src="/corp/homeowner/images/promo/gallery_traditional_3_sm.jpg" ...

jqueryhtmltagsattr

Issue with D3: Events not triggering transitions

I am currently working on creating a bar chart using D3 in Angular4. // Enter Phase this.chart.selectAll('.bar') .data(this.barData) .enter() .append('rect') .attr('class', 'bar'); // Update Phase let bars ...

javascriptjquerycssangulard3.js

Stacking divs one on top of the other

My goal is to design a simple webpage with two full screen background colored divs. On top of these background divs, I want to add two smaller divs where I can input text and place a button underneath to randomize the words (refer to the attached screensho ...

htmlcss

Display a 'div' automatically while hiding a different 'div' using JavaScript

I have implemented a user question form where the form is submitted using ajax, saved to the database, and a success message is displayed. After a few seconds, this message disappears and the user question form reappears automatically. I have successfully ...

javascriptjqueryhtml

Ways to eliminate models that are not currently connected to the DOM

Within my form, I have implemented logic using ng-if to determine which elements are displayed based on user selections. For instance, if a user selects USA as the country, the state drop down will be shown as it was conditioned upon an ng-if for the count ...

javascripthtmldomangularjs

Using Font Awesome icons instead of markers in Leaflet

Within this code snippet, I initially utilized data[key].category to represent the corresponding icon as a marker. However, my intention is to switch to Font Awesome icons for a more lightweight runtime experience in instances where multiple icons may ne ...

javascriptcssleafletfont-awesome

Icon and div-based carousel/slider for a unique visual experience

I have a project in progress that requires dynamically displaying icons based on the user's selection. These icons are essentially glyphs with a two-word title underneath them. Essentially, there is an <div class="col-md-9"> ...

javascriptjquerycsstwitter-bootstrap

Simplified user interface for detecting radio button clicks

Currently working on a form that includes radio buttons, where an update function is triggered whenever there is a user input change. The challenge I am facing is how to incorporate user-friendly radio buttons with a larger button area encompassing both t ...

javascripthtmlcss

The 404 error page will show the title of the corresponding 404 file

I recently made changes to my site's .htaccess file by inserting the following line: ErrorDocument 404 page-not-found.html Now, when I try to access a nonexistent page like example.com/pagethatdoesntexist, all I see on the screen is "page-not-found ...

htmlwebcustom-error-pages

The functionality of the controls is not functioning properly when attempting to play a video after clicking on an image in HTML5

While working with two HTML5 videos, I encountered an issue with the play/pause functionality. Despite writing Javascript code to control this, clicking on one video's poster sometimes results in the other video playing instead. This inconsistency is ...

javascriptjqueryhtmlvideo

Tips for creating a dynamic menu item that stands out with a highlighted style

I would like to add a colored square to highlight the active menu item. .main-menu ul { padding: 0; margin: 0; text-align: center; } .main-menu li { list-style-type: none; display: inline-block; padding: 40px 0; } .main-menu a { font-fam ...

javascriptjqueryhtmlcss

Leveraging universal SCSS variables within an AstroJS endeavor

Hello, I'm a beginner when it comes to using AstroJS. In my project structure, there is a folder named styles inside the src folder. Inside this folder, there is a file called global.scss where I have defined some global SCSS variables in HEX format: ...

csssassglobal-variablesastrojs

Performing read and write operations on targeted CSS classes using C#

I'm currently developing a C# application that needs to manipulate CSS files. Imagine you have the following CSS code snippet: .ClassOne { color: #FFFFFF; font-weight:normal; font-size: 9pt; font-family: Tahoma; ...

c#cssparsing

Emphasize/Style text fields

I am seeking to incorporate a real-time difference viewer into a webpage that maintains whitespace. In the past, I utilized TinyMCE and JQuery in IE6 for a similar project, but it did not preserve whitespace. TinyMCE was not suitable as it is a WYSIWYG ed ...

javascriptjqueryhtmldifftinymce

Tips for centrally zooming responsive images without altering their dimensions

I have created a custom jQuery and CSS function that allows an image to zoom in and out on mouseover while maintaining a constant box size. I modified an example code to suit my needs. Check out the demo here: https://jsfiddle.net/2fken8Lg/1/ Here is the ...

javascriptjqueryhtmlcssimage

What is the best way to apply a class to the 'td' element for two specific columns?

I have a rendered row from a database echo "<table border='1' cellpadding='10'>"; echo "<tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> <th></th> <th></th> ...

phpcssclasshtml-table

``I'm having trouble getting the onchange event to function properly in a customized

After following a tutorial, I successfully created a custom select dropdown using the provided link. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select However, I am facing an issue with the onchange event not working for the select ...

javascripthtmlcss

Angular: Ensuring Paypal button does not display twice without a hard reload

I have encountered an issue with a PayPal payment button on my page. The button displays fine when I generate it for the first time, but if I try to generate it again for another order, it doesn't show up. I have to hard reload the page to get it to w ...

htmlangulartypescriptionic-frameworkpaypal

What is the best way to pass an SQL variable from an HTML table to a JS popup and then to a PHP variable without using jQuery?

My goal is to develop software for a job board where jobs can be added and maintenance workers can mark them as completed. I am currently facing an issue with passing the request_ID from my table to the SQL query at the bottom in deleteData(). Despite tryi ...

javascriptphphtml

The font size in the Android Chrome browser appears different when switched between portrait and landscape modes

I have uploaded a screenshot here, but I am puzzled as to why the font size appears differently on the Android browser in portrait and landscape modes. $(document).ready(function(e) { var x=$(".main").css("font-size"); alert(x) }); .main{ font-size: ...

jquerycsshtml