Prevent table content from appearing above the 'sticky' header

I am facing an issue with a single table that has a fixed header and scrolling body. The problem arises when the body extends beyond the header while scrolling. I have provided a zoomed-in clip of the problem. Can anyone offer a solution for this without using plugins or third-party solutions?

Here is the link to view the issue: https://i.sstatic.net/pDsA6.png

This is the CSS code for my table:

.tableFixHead {
    overflow: auto;
    height: 74vh; 
}

.tableFixHead tr th {
    position: sticky;
    top: 0;
}
.tableFixHead table {
    margin-top: 5px;
}
.tableFixHead td:first-child {
    position: inherit;
    left: -1px;
}
htmlcss

Answer №1

.tableFixHead {
  overflow: auto;
  height: 74vh;
}

.tableFixHead tr th {
  position: sticky;
  background-color: grey;
  color: white;
  opacity: 1;
  top: 0;
}

.tableFixHead td {
  width: 100vw;
}

.tableFixHead table {
  margin-top: 5px;
}

.tableFixHead td:first-child {
  position: inherit;
  left: -1px;
}
<p> Sample </p>
<p> Random content on top</p>
<table class="tableFixHead">
  <tr>
    <th>head</th>
  </tr>
  <tr>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
  </tr>
</table>

I have not encountered the issue you described, as the sticky header remains at the top of the view pane. Is there any specific action causing the sticky header to move downward?

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

The innovative way Vue.js revolutionizes HTML updates within a Websocket onmessage event

I'm new to Vue.js and I'm trying to capture data inside the onmessage event of a websocket and update an HTML component (either a span or div). While console.log or alert functions work in onmessage, I couldn't get it to update the span. Th ...

javascripthtmlvue.js

Tips and tricks for stopping a jquery animation

I have created a hover effect for list items. When I hover over an item, it triggers an animation using the .animate() method. However, when I move my cursor away from the item, the hover animation continues until it reaches its end point. Is there a way ...

jqueryhtmlcssjquery-animate

Create a new variable and compile the sass/less file when it is requested

I'm exploring options to utilize Node.js or another server-side language to handle a specific type of request. For instance, receiving a request like this: The goal is to extract the value from the URL parameter and use it to dynamically update a var ...

javascriptcssajaxsassless

Two distinct sets of radio buttons with separate functionalities

I have a unique situation where I have two distinct sections that contain sets of radio buttons with different values and IDs. However, I am facing an issue as I can only select one button at a time for both sets. My requirement is to have these two sets ...

csshtmlradio-button

Prevent the click event on an Angular component

I am currently utilizing the component found on this link: I have not been able to locate a function or property that disables the component state, making it impossible to select dates on the calendar. Due to this limitation, I am interested in learning ...

javascripthtmlangulartypescriptdom

The stylesheet is linked, but no changes are taking effect

I've linked my template.php to style.css, and when I make changes in template.php, they show up fine. However, if I make changes in the stylesheet, nothing happens. What should I do? My website is not live; I'm working on it using a WAMP server. ...

javascriptphphtmlcss

The functionality of the slick slider seems to be malfunctioning

I've been trying to integrate the slick slider into my website, but it just won't work. I've double-checked everything multiple times, but I can't seem to find the issue. It's driving me crazy! If anyone can help me identify the pr ...

javascriptjqueryhtmlslick.js

Is there a way to ensure that the height of my images matches exactly with its width?

Is there a way to ensure that the height of my images always matches their width? I need the height of the images to dynamically adjust and match the width, even when the window is resized. For example, if the image width is 500px, the height should also ...

htmlcss

Altering the "src" property of the <script> tag

Can the "src" attribute of a current <script> element be altered using Jquery.attr()? I believed it would be an easy method to enable JSONP functionality, however, I am encountering difficulties in making it operate effectively. ...

javascriptjqueryhtml

SVG: The styles defined in CSS are not being implemented

I created an HTML file that includes a SVG element along with some CSS styles imported correctly, such as: rect.cell-border { stroke: #000; stroke-width:1.3px; } Within the SVG, there is an element structured like this: <rect class="cell c ...

csssvg

Refresh the CSS without having to reload the entire page

I am working on a web page that operates on a 60-second timer. The code snippet below is responsible for updating the content: protected void RefreshButton_Click(object sender, EventArgs e) { ReportRepeater.DataBind(); ReportUpdatePane ...

c#asp.netcssupdatepanel

Header 1 escaping from its designated container

Encountering a problem with a h1 element not remaining within its parent div. Strangely, it remains contained until the font size of the h1 surpasses a certain threshold, causing it to spill out of the div and overlap with other content. Here is the snippe ...

css

The alignment of Bootstrap table headers in a Vue.js component needs adjusting for better display

Is there a way to ensure proper alignment of headers and column bodies in my Vue.js DataGrid component when utilizing the vuedraggable package for column reordering? Below is the code snippet for my DataGrid.vue component: <template> <div class ...

htmlcssvue.jshtml-tablebootstrap-5

Utilize the CSS ~ selector to target the first child element

I have a scenario where I want to apply CSS to the first child only if a second or other child exists in the parent. The '~' selector can achieve this, but it applies the style to siblings of the first child, and I need it the other way around. ...

csscss-selectors

Unable to display Bootstrap Glyphicons within a div container

I've created the following code snippet: function acceptButtonClick(th) { var id = $(th).attr('data-id'); $(th).parent().parent().find('div.Declined').attr('class', "Approved"); $(th).parent().parent().find( ...

javascriptjqueryhtmlcsstwitter-bootstrap

Transforming a string into the date input type layout

I am working with an HTML input type of "datetime-local" that I save in a Datetime field within a MS SQL Server database. Upon loading the edit page, I aim to populate this HTML date field with the value retrieved from the database. Upon examining the va ...

javascripthtmldatetime

Design a row with two columns of the same height - one containing an image, and the other a scrollable

Can anyone provide guidance on creating two responsive Bootstrap 4 columns with equal height, where one column contains an image and the other displays a scrollable list? Check out this fiddle (please note that I want to ensure the list group does not exc ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Add some extra space at the bottom using Bootstrap 4 specifically for mobile devices like smartphones and iPhones

According to the instructions on Getbootstrap.com, adding CSS margin-bottom:4rem; is recommended for images. The naming convention for classes is as follows: {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and x ...

cssbootstrap-4

Creating an HTML element using jQuery isn't just about designing; it

When creating HTML elements using an Ajax call from the server-side, it can be challenging to align them properly on a responsive web page. Below is an example of how elements are generated with an Ajax call: var html = ""; $.ajax({ type: " ...

htmljquerycsstwitter-bootstrap

Iterating through styles in a selector's attribute

I am creating a site map layout. Looking for a solution similar to this: ul.site-map li[data-level="1"] { margin-left: 50px; } ul.site-map li[data-level="2"] { margin-left: 100px; } ul.site-map li[data-level="3"] { margin-left: 150px; } This code ...

cssstylus