Resolve the issue with the sticky positioning

I'm dealing with a table and struggling to make the CSS sticky position work. Can someone help me troubleshoot?

.table_wrapper {
            width: 100%;
            height: 400px;
            overflow: auto;
            position: relative;
        }
        
        .table_wrapper thead th {
            position: -webkit-sticky;
            position: sticky;
            z-index: 2;
            top: 0;
        }
<div class="table_wrapper">
            <table >
                <thead>
                    <tr>
                        <th>Patient Name</th>
                        <th>Contact Number</th>
                        <th>Date/Time</th>
                        <th>Status</th>
                        <th>Duration</th>
                        <th>Room/Location</th>
                        <th>Appointment Type/Reason</th>
                        <th>Notes</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
htmlcsscss-positionsticky

Answer №1

To ensure proper functionality, make sure to designate the table as a relative position. Adjusted the height and included additional td elements for scrolling purposes.

table{
  width: 100%;
  height: 1400px;
  overflow: auto;
  position: relative;
}

.table_wrapper thead th {
  /*position: -webkit-sticky;*/
  position: sticky;
  z-index: 2;
  top: 0;
}
<div class="table_wrapper">
  <table >
      <thead>
          <tr>
              <th>Patient Name</th>
              <th>Contact Number</th>
              <th>Date/Time</th>
              <th>Status</th>
              <th>Duration</th>
              <th>Room/Location</th>
              <th>Appointment Type/Reason</th>
              <th>Notes</th>
          </tr>
      </thead>
      <tr>
        <td>Patient Name</td>
        <td>Contact Number</td>
        <td>Date/Time</td>
        <td>Status</td>
        <td>Duration</td>
        <td>Room/Location</td>
        <td>Appointment Type/Reason</td>
        <td>Notes</th>
    </tr>

    (Additional rows with similar structure continue...)
    
         <tbody>
      </tbody>
  </table>

</div>

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

Inject CSS into an iframe containing a JavaScript form by iterating over a collection of iframes

My task is to manipulate an iframe (chatbox) once it's loaded on a webpage. This chatbox consists of four iframes, each with a different id that changes with every page load. Since the iframe that needs manipulation is always the last one in the list, ...

javascriptcssiframe

Fuzzy picture utilizing <canvas>

Working on translating a webgame from Flash to HTML5 with pixel art sprites, I've noticed that the canvas appears blurry compared to Flash where pixels are more defined. <!DOCTYPE html> <html> <body> <canvas id="c" style="bor ...

javascripthtmlhtml5-canvas

What steps should be taken to refresh a page following an AJAX file upload?

I need some help creating a progress bar to track file uploads on my website. Here's what I have so far: HTML: <form action="upload/files.php" method="post" enctype="multipart/form-data" id="frmUpload"> <input type="file" name="upfile" ...

javascripthtmlajaxupload

What are the steps to format text into 2 columns with a personalized design?

As I develop a website using HTML, CSS, and jQuery, I encountered a layout challenge. The text on the page is designed in a 2-column style, with an image positioned before it. Currently, the structure looks like this: <div> <div style=" ...

jqueryhtmlcss

Swap out the traditional submit button on your form with a stylish Font Awesome

Can anyone assist with replacing the submit button with a Font Awesome icon? I've tried it myself, but the icon is not displaying on the button. Here is what I have attempted so far: <form action="{{route('destroycourse', $course->id) ...

htmlcss

Implement a counter in a JavaScript table, initializing it to zero

I have successfully written my code, but there is one issue. The first row is starting with the number one instead of zero. I'm looking for suggestions on how to start from zero. Any help would be greatly appreciated. Thanks! <script> var tabl ...

javascriptjqueryhtml

A basic webpage created using ASP.NET featuring simple HTML text

Is it acceptable to manually code HTML, such as <p>, <ul>/<li>, <h3>, <h4>, <blockquote> tags, into a Content Page that already has an existing Master Page? The content is similar to a blog post. Are there better desig ...

asp.nethtml

css Sibling elements restricted within parent container

Encountering an issue with a star rating css example when more than one fieldset is added. The current CSS code seems to be working fine, but it fails when multiple instances of the same elements [fieldset] are present. I've been struggling to find a ...

htmlcssratingsiblings

How to automatically open JQuery Accordion panels when the page loads

My Accordion loads with the 1st panel open upon page load, but I am looking for a way to have the entire Accordion closed by default. Any help or suggestions on how to achieve this would be highly appreciated. Thank you for your assistance. FIDDLE http:// ...

javascriptjqueryhtmlcss

Is there a way to eliminate the scrollbar from the purecss navbar?

My website utilizes pure.css and the navbar has more elements than can fit on a small screen without scrolling. This results in an unwanted scrollbar appearing. I want the navbar to remain at the top so that it scrolls along with the content. However, when ...

htmlcssresponsive-designnavbaryui-pure-css

Adding an HTML tag attribute to a Bootstrap 5 popover using the setAttribute() method: A Step-by

Trying to include HTML tags in a popover setAttribute() function within Bootstrap 5, but the tags are displayed as content rather than being applied as attributes. <button type="button" class="btn btn-secondary mx-2" data-bs-containe ...

javascripthtmlbootstrap-5

Learn how to utilize Javascript to easily drag and drop an image within the same block

I am encountering an issue with dragging and dropping images or swapping them using JavaScript. I have tried to implement this in the code below, where clicking on icons moves them onto a colored div. However, I am now trying to drag and drop the images wi ...

javascriptjqueryhtmlcss

Display the output of a MySQL query in a PHP array

Imagine I have the MySQL table results shown below: ID price ------------- 1 10 2 20 3 30 My goal is to take these values and store them in a PHP array, then display them as an HTML table row by row. One way to achie ...

phpmysqlhtml

Retrieve the paragraph located directly under the specified heading from any location

I'm having trouble figuring out how to specifically target a paragraph after the heading. Here is an example of my HTML file script: <!doctype html> <html> <head><title>SAM.com</title> </head> <body><h1&g ...

html

How to Adjust Overlapping Text in CSS?

Currently, I am facing an issue with an element overlapping in my CSS file. On a regular browser, one line of text appears fine but on mobile devices, it overlaps into two lines. This problem is specifically for the mobile version of the website, particula ...

htmlcssmobiletwitter-bootstraptablet

Exploring Navigation States with JQuery: Active, Hover, and Inactive

I've been struggling with the code below as it doesn't seem to be working. I had a simpler code before for swapping images, so if there's an easier way to achieve this, I'm open to suggestions. Just to recap, I'm trying to: 1. La ...

jquerycssmenuhover

Stacking pictures with CSS and absolute placement

I have designed a webpage where I need to layer three images in a specific order to create a background for content placement without any movement during scrolling. Fixed positioning is not suitable for this purpose. Below is the sequence in which the imag ...

htmlcsscss-position

Using a combination of radio buttons and JavaScript to adjust the color of a div element

Currently, I am experimenting with radio buttons to modify the background color of my div tag. My goal is to incorporate more than one condition. For example, if button A and button B are both clicked, then change the color to green. This is what I have im ...

javascripthtmlradio-button

What is the best way to deactivate the second selection option?

<select id="title0"> <option value="0">--- disable</option> <option value="1"> books</option> </select> <button id="save" type="submit">Save</button> <select id="title1"> <option value="0"& ...

javascriptjqueryhtml

"Ensure div remains at the bottom of the page even while

In order to implement a feature where the menu sticks to the top when scrolling down, you can use the following JS code. You can view a live example of this functionality on this Plunker by widening the preview window to see the columns side by side. wi ...

javascriptjqueryhtmlcss