"Creating a fixed header for a CSS table that remains at the top of

How can I make a table header sticky to the main-1? I have tried creating a working demo with multiple rows but haven't been successful. HTML: on CodePen: https://codepen.io/jokemail/pen/VwBvNBv

    
    #printGridHeader
    {
        position: sticky;
        top: 6.5em;
        z-index:202;
        background-color: #ffffff;
    }
    #printGridTable.th
    {
        position: sticky;
        top: 6.5em;
        z-index:202;
        background-color: #ffffff;
    }
<div id="main-1" class="bootstrap">
      <form id="frmSearch_1" method="post">
        <div id="printGridHeader" style="text-align:right;margin:20px 0px;">
          This also has to be sticky and currently is
        </div>
        <div id="tableDiv" style="overflow-x:auto;">
          
          <table class="table table-hover" id="printGridTable" style="overflow-x:auto;width:100%;">
            <thead>
              <tr id="printGridTable_head">
                <th scope="col" width="40px">Nr.</th>
                <th scope="col" width="40px">Nr.</th>
              </tr>
            </thead>
            <tbody>
              <tr class="table-row">
                  <td width="40px">1.</td>
                  <td>126</td>
              </tr>
              <tr class="table-row">
                  <td width="40px">1.</td>
                  <td>126</td>
              </tr>
              <tr class="table-row">
                  <td width="40px">1.</td>
                  <td>126</td>
              </tr>
              <tr class="table-row">
                  <td width="40px">1.</td>
                  <td>126</td>
              </tr>
              <tr class="table-row">
                  <td width="40px">1.</td>
                  <td>126</td>
              </tr>
              <tr class="table-row">
                  <td width="40px">1.</td>
                  <td>126</td>
              </tr>
              <tr class="table-row">
                  <td width="40px">1.</td>
                  <td>126</td>
              </tr>
            </tbody>
          </table>
        </div>
      </form>
    </div>

htmlcsssticky

Answer №1

  1. Eliminate the style 
    style="overflow-x:auto;"
    from the "tableDiv" Div
  2. In your CSS, use #printGridTable th instead of "th"

Here's the complete code:

    #printGridHeader
    {
        position: sticky;
        top: 6.5em;
        z-index:202;
        background-color: #ffffff;
    }
    #printGridTable th
    {
        position: sticky;
        top: 10px;
        z-index:202;
        background-color: #ffffff;
    }
<div id="main-1" class="bootstrap">
      <form id="frmSearch_1" method="post">
        <div id="printGridHeader" style="text-align:right;margin:20px 0px;">
          This also needs to be sticky and already is
        </div>
        <div id="tableDiv">
          
          <table class="table table-hover" id="printGridTable" style="overflow-x:auto;width:100%;">
            <thead>
              <tr id="printGridTable_head">
                <th scope="col" width="40px">Nr.</th>
                <th scope="col" width="40px">Data</th>
              </tr>
            </thead>
            <tbody>
              ... (content here) ...
            </tbody>
          </table>
        </div>
      </form>
    </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

Adjust the width of an HTML element as soon as a neighboring element is added

My objective is to achieve automatic resizing of an HTML element. This is the script I am using: <html> <head> <style> .main{ background-color: blue; width: 500px; ...

javascripthtmlcss

Styling Overflow in Coda Slider using CSS

Currently utilizing the Coda Slider for my project. For those unfamiliar with the Coda Slider, it initially hides the overflow-x position until a tab is clicked. This triggers an animation that slides the hidden DIV in either from the right or left side. ...

jquerycsscoda-slider

Grow the Bootstrap column when hovered over (Similar to Netflix)

My grid view is structured as follows: jQuery(window).resize(function(evt) { jQuery(".grid-content > div > div > .channelImage").height(jQuery(".grid-content > div > ...

csstwitter-bootstrap

Decorative initials have a tendency to create spaces within the text

I have incorporated Google Fonts into my website, along with Bootstrap. Here is the code I am using: .initial { font-size: 1.5em; font-family: 'Euphoria Script', cursive; } p { font-family: 'Open Sans', sans-serif; } <html> ...

htmlcss

Displaying a pop-up window containing information retrieved from the console output

Upon user input in the form on my web application, an scp and ftp process is initiated that takes around 2-3 minutes to complete. The result page consequently experiences a similar delay in loading. To enhance user experience and provide real-time updates ...

htmlajaxspring-bootpopup

Display a smaller image preview in the product photo gallery

Hey there! I'm currently working on a website and looking to showcase my product in a similar way as shown here: I would like my main image to be displayed with all the other variants of the product image underneath, along with the same visual effect ...

javascriptjqueryhtmlcssangularjs

Error message: Unable to locate the ID attribute of this element using jQuery - resulting in undefined value

Trying to extract the ID and display it with an alert message upon clicking, but it keeps showing "undefined" instead. Can anyone provide some assistance? Here is the important part of the code: HTML: <img src="/pictures/picture.jpg" class="r-gal-photo ...

javascriptjqueryhtml

CSS tip: Display only the latest x entries on a list

Can CSS be used to display only the most recent x items in a list? The code below reveals every item except the first two. How can I make it so that only the last two items are displayed in the list? ul li { display: none !important; } ul li:nth-las ...

htmlcss

Tips for aligning multiline text in the center of images with varying widths

Excuse my lack of experience, but I have a question, I am looking to center a header and some text next to an image with variable width. Additionally, the text should be able to position on either side of the image, while still being coded first in the HT ...

phphtmlcsscenter

Issues with message display validation in jQuery

Validation has been applied to the form, and there are div elements within the input fields with corresponding IDs. The goal is to display error messages within those divs. Specifically, if an input field is missing, the errorMessage should be set in the ...

javascriptjqueryhtmlcssjquery-validate

jquery form submission issue unresolved

I am currently utilizing jQuery version 1.10.1 and here is a snippet of my HTML code: <li> <a href='' id='logout'>Log Out</a></li> <form id='logout_form' method='post'> <i ...

jqueryhtmlform-submit

What is the reason behind the limitation of resizing only the most recent page element I added?

On my webpage, I have implemented a feature where I can click on an image to enlarge it. Clicking on the image again shrinks it back to its original size. However, I am encountering an issue where only the latest image added to the screen is resizable, e ...

javascripthtmlcssdhtml

abnormality observed in the way checkbox output is linked to an object's property through ng-model

I am having trouble understanding the following issue: Here is my angular code: (function(){ 'use strict'; angular.module('myMod',[ ]) .controller('abc',function($scope) { $scope.products = products; $sc ...

javascripthtmlangularjsangularjs-scopeangularjs-ng-model

Locate every div element that contains a span id matching any word in a specified list

I'm attempting to create a script that will add a class based on whether or not a list item's span id contains certain words from a list. The list follows this structure: <div id="main_list"> <li class> <a data-item_ ...

jqueryhtmlcss

Using a series of identical divs to dynamically update the image URL

Greetings! I am a newcomer to the world of web development and I have decided to hone my skills by creating a small website for my mother! My goal is to replicate a specific div multiple times while changing only the image URL and the heading caption. < ...

javascripthtml

Steps for building a graph in an HTML document with jOrgChart

Can the jOrgChart jQuery plugin be utilized to create a graph within an HTML document, similar to the demonstration provided? If this approach is not feasible, what are some alternative methods for generating a chart of this nature without relying on Drup ...

javascriptjqueryhtmljquery-pluginscharts

Creating an interactive table with the power of FPDF and PHP

I have developed a unique Invoice System that allows users to customize the number of headings and fields using FPDF in conjunction with PHP. Subsequently, I can input the heading names and field values into HTML input fields. However, I am encountering a ...

javascriptphphtmlfpdf

Uploading files from iOS device with the original file name

Currently, I am using a basic HTML file upload snippet that functions on iOS devices. However, I have encountered an issue where the uploaded file is always labeled as 'image.jpeg'. Is there a method to retrieve the original filename, for example ...

iosiphonehtmlfile-uploadupload

Using the ::before selector to loop through td with Sass

I've recently started using sass and I'm encountering some difficulties with the ::before syntax within a @for loop. My table row consists of six td elements. <tr> <td></td> <td></td> <td da ...

csssass

What is the best way to position a button to the right side of the screen?

Is there a way to align a button to the right of a page? I attempted using text-align: right; and align-content: right; In addition, I want the button to utilize display: flex; #hideShow { display: flex; text-align: right; align-content: right; ...

htmlcss