Ensure that all `thead th` elements remain in a fixed/sticky position when using a data

Question

Ensure that all `thead th` elements remain in a fixed/sticky position when using a data

I am facing an issue with my data table requirement. I need to have 2 thead elements in the table, both of which should stick when scrolling. However, only the last thead's tr stays stuck at the top while the first one gets hidden.

Can anyone help me resolve this issue? The problem seems to be the mixing of top positions of both elements, and since their heights are dynamic, I am unsure how to fix it.

CSS :

.container{
  border: 1px solid red;
  height: 100px;
  overflow-y: auto;
}

table{
  width: 100%;;
  border-collapse: collapse;
  position: relative;
}

thead{
  overflow-y: auto;
}

thead tr th{
  background-color: yellow;
  position: sticky;
  left: 0; top: 0;
}

Check out the live demo here

Thank you in advance for your assistance.

html css

Answer 1

Answer №1

You have the option to achieve this with just a single thead element. However, if you are set on using two thead elements, it's important to assign different classes to each one. The second thead should also have a suitable value for the top property to ensure proper alignment.

In the following example, there are two thead elements. The first contains span and input elements, while the second one only has input elements like your example. Both sections stick to the top correctly.

.container{
      border: 1px solid red;
      height: 200px;
      overflow-y: auto;
    }

    table{
      width: 100%;;
      border-collapse: collapse;
      position: relative;
    }

    thead{
      text-align:left;
      overflow-y: auto;
      position: sticky;
      left: 0; top: 0;
    }
   .secondth{
      text-align:left;
      overflow-y: auto;
      position: sticky;
      left: 0; 
      top: 42px;
    }
    thead tr th{
      background-color: yellow;
    }
    thead tr th span{
    display:block;
    }

<!DOCTYPE html>

    <html>
      <head>
        <link rel="stylesheet" href="lib/style.css" />
        <script src="lib/script.js"></script>
      </head>

      <body>
        <div class="container">
          <table>
            <thead>
              <tr>
                <th>
                  <span>One</span>
                  <input type="text" value="search" />
                </th>
                <th>
                  <span>Two</span>
                  <input type="text" value="search" />
                </th>
                <th>
                  <span>Thr</span>
                  <input type="text" value="search" />
                </th>
              </tr>
            </thead>
            <thead class="secondth">
          <tr>
            <th><input type="text" value="search" /></th>
            <th><input type="text" value="search" /></th>
            <th><input type="text" value="search" /></th>
          </tr>
        </thead>
            <tbody>
              <tr>
                <td>comment1</td>
                <td>comment1</td>
                <td>comment1</td>
              </tr>
              <!-- Additional table rows -->
            </tbody>
          </table>
        </div>
      </body>
    </html>

Answer 2

You have the option to achieve this with just a single thead element. However, if you are set on using two thead elements, it's important to assign different classes to each one. The second thead should also have a suitable value for the top property to ensure proper alignment.

In the following example, there are two thead elements. The first contains span and input elements, while the second one only has input elements like your example. Both sections stick to the top correctly.

.container{
      border: 1px solid red;
      height: 200px;
      overflow-y: auto;
    }

    table{
      width: 100%;;
      border-collapse: collapse;
      position: relative;
    }

    thead{
      text-align:left;
      overflow-y: auto;
      position: sticky;
      left: 0; top: 0;
    }
   .secondth{
      text-align:left;
      overflow-y: auto;
      position: sticky;
      left: 0; 
      top: 42px;
    }
    thead tr th{
      background-color: yellow;
    }
    thead tr th span{
    display:block;
    }

<!DOCTYPE html>

    <html>
      <head>
        <link rel="stylesheet" href="lib/style.css" />
        <script src="lib/script.js"></script>
      </head>

      <body>
        <div class="container">
          <table>
            <thead>
              <tr>
                <th>
                  <span>One</span>
                  <input type="text" value="search" />
                </th>
                <th>
                  <span>Two</span>
                  <input type="text" value="search" />
                </th>
                <th>
                  <span>Thr</span>
                  <input type="text" value="search" />
                </th>
              </tr>
            </thead>
            <thead class="secondth">
          <tr>
            <th><input type="text" value="search" /></th>
            <th><input type="text" value="search" /></th>
            <th><input type="text" value="search" /></th>
          </tr>
        </thead>
            <tbody>
              <tr>
                <td>comment1</td>
                <td>comment1</td>
                <td>comment1</td>
              </tr>
              <!-- Additional table rows -->
            </tbody>
          </table>
        </div>
      </body>
    </html>

Ensure that all `thead th` elements remain in a fixed/sticky position when using a data

Answer №1

Similar questions

How to Build a Chatbox using AJAX, HTML, and C#?

Navigation Menu Spanning Across Full Width of All Screens

Troubleshooting an Angular.js "Hello World" application that is malfunctioning

What is the best way to prevent certain bootstrap classes from being applied across all elements?

How can one generate an HTML element using a DOM "element"?

Personalize the pagination or other elements of Splide in a Svelte component to suit your needs

I'm attempting to make the button hover color transparent, but unfortunately, it's not having any effect

Troubleshooting Problem with Website Responsiveness on iPhones Using Bootstrap 5

Running a CSS keyframes animation can be achieved by removing the class associated with it

Retrieving a boolean value (from a JSON file) to display as a checkbox using a script

Allow iframe to be edited within jsfiddle

Attempting to transfer a JSON object from a frontend Form Input to an Express backend

having difficulty grasping the variable's scope within this code

If the condition is based on the category in category.php and single.php

Issue with Vuetify carousel not resizing to fit the entire width and height

Steps to replace the content of an HTML file (such as modifying images) by clicking on an element in a separate HTML file

Styling anchors that are focused or visited while scrolling using CSS and jQuery

Footer button overrides list components due to improper implementation of vertical ion-scroll

Creating a stunning image reveal animation using GSAP and clip-path within a React environment

Choose from a dropdown menu to either activate or deactivate a user account