What is the best way to keep an HTML table header fixed within a div while scrolling?

My HTML table now has the scrolling function. Below, you can find the code snippet for the HTML table setup.

<div id="flagging"  >
  <table>
    <thead>
      <th> Header 1 </th>
      <th> Header 2 </th>                            
    </thead>
    <tbody >
      <tr>
        <td> Row 1, Data 1</td>
        <td>Row 1, Data 2</td>
      </tr>
      <tr>
        <td> Row 2, Data 1</td>
        <td>Row 2, Data 2</td>
      </tr>
    </tbody>
  </table>

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

The following code is specifically for enabling the scroll functionality on the table.

#flagging td,#flagging th{
  padding: 2px;
  text-align: center;
  border: 1px solid #817e7e;
}
#flagging{
  border: 1px solid #5a585a;
  overflow: auto;
  height: 150px;
}

Is there a way to make the header stay fixed while scrolling in this setup?

javascriptjqueryhtmlcss

Answer №1

Is it possible to find a star in the sky?

#highlight td,#highlight th{
    padding: 2px;
    text-align: center;
    border: 1px solid #817e7e;

}
#highlight{

    border: 1px solid red;
    overflow: auto;
    height: 150px;
    position:relative;
}

thead{
    position:fixed;
    background:white;
}

tbody{
    position:absolute;
    top:25px;
}
<div id="highlight"  >
   <table>
     <thead>
       <th> Header 1 </th>
       <th> Header 2 </th>                            
     </thead>
     <tbody >
       <tr>
         <td> Row 1, Data 1</td>
         <td>Row 1, Data 2</td>
       </tr>
       <tr>
         <td> Row 2, Data 1</td>
         <td>Row 2, Data 2</td>
       </tr>
        <tr>
         <td> Row 2, Data 1</td>
         <td>Row 2, Data 2</td>
       </tr>
        <tr>
         <td> Row 2, Data 1</td>
         <td>Row 2, Data 2</td>
       </tr>
        <tr>
         <td> Row 2, Data 1</td>
         <td>Row 2, Data 2</td>
       </tr>
        <tr>
         <td> Row 2, Data 1</td>
         <td>Row 2, Data 2</td>
       </tr>
       <tr>
         <td> Row 2, Data 1</td>
         <td>Row 2, Data 2</td>
       </tr>
       <tr>
         <td> Row 2, Data 1</td>
         <td>Row 2, Data 2</td>
       </tr><tr>
         <td> Row 2, Data 1</td>
         <td>Row 2, Data 2</td>
       </tr><tr>
         <td> Row 2, Data 1</td>
         <td>Row 2, Data 2</td>
       </tr><tr>
         <td> Row 2, Data 1</td>
         <td>Row 2, Data 2</td>
       </tr><tr>
         <td> Row 2, Data 1</td>
         <td>Row 2, Data 2</td>
       </tr><tr>
         <td> Row 2, Data 1</td>
         <td>Row 2, Data 2</td>
       </tr>
     </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

Login validation errors in Devise are not being enforced properly

I have implemented devise for handling login and signup functionalities on my website. However, I am encountering an issue with validations on the sign-in page. Here is the code snippet I am using: sessions/new.html.erb <%= form_for(resource, as: reso ...

htmlruby-on-railsvalidationerror-handlingdevise

Have you considered utilizing "call for('express')()" instead?

When creating a simple Web server with NodeJS and Express, most tutorials provide examples like the following: const express = require('express'); const app = express(); app.listen(3000, () => console.log("Started")) app.get(' ...

javascriptnode.jsexpress

The functionality of the button seems to be malfunctioning specifically in the Mac Firefox

My button isn't working in Mac Firefox only. Below is the code: <button class="col btn-change"><a href="/p/88" style="color: white;">Landscape</a></button> However, the following two codes are functioning correctly. In the fi ...

cssbootstrap-4

Creating a HTML drop-down menu that requires the user to make a selection in the first drop-down before moving on to the next drop

Is there a way to prevent the user from selecting the second drop-down menu (time) until they have chosen an option from the first drop-down menu (movie)?<html> <body> <h1>Using the select element in HTML</h1> <p>The selec ...

javascripthtml

Issue with function execution within useEffect() not being triggered

I am facing an issue where two functions in my component are not being called every time it renders, despite my efforts. Placing these functions in the dependency array causes an infinite loop. Can anyone identify why they are not executing? function Por ...

javascriptreactjsaxiosstateuse-effect

Using ES6 and Typescript, when a button is clicked, apply a class to all TD elements within the button except for the first one. No need for jQuery

A sample table structure is shown below: <table> <tr> <td>1</td> <td>joe</td> <td>brown</td> <td><button onclick="addClasses()">Add Class to add TD's in t ...

javascripttypescript

The loading animation does not appear in the NextJS 14 - loading.tsx component while a GET request is being processed

Component with 500 photos displayed on my page: 'use client'; import { useEffect, useState } from 'react'; import { wait } from '@/components/loaders/skeletons'; export default function Postings() { const [photos, setPhotos ...

javascriptreactjsnext.js

Is it possible to modify colors using PHP in CSS?

Within my CSS file, there is a div with the property: background-color: blue; Can PHP be used to modify this color? Here's the HTML structure: <div id="div_id" class="div_class"> Text </div> And here's the corresponding CSS: ...

phphtmlcss

How can Node.js developers properly utilize PM2 for their projects?

I'm currently contemplating a switch from forever to PM2 as a way to ensure my node application stays up and running. I find myself puzzled by the various recommended methods for initiating a process: $ pm2 start app.js -i 4 # Daemonize pm2 and Star ...

javascriptnode.jspm2

Top div click causes bottom div to slide

I'm currently working on a project that involves using CSS and jQuery, but I've encountered an issue that I haven't been able to solve. https://i.sstatic.net/CSovs.png Here is the demo link: . When the second div is clicked, why does the t ...

jquerycss

Creating Dynamic Components in ReactJS with Conditional Rendering

Currently, I'm using an if-else statement to show different content based on whether Firestore is ready and the user is logged in. However, I am facing an issue where the firebase.auth.uid is returning as undefined even though it is correctly connecte ...

javascriptreactjsfirebase

Trouble with z-index when attempting to stack forms on top of one another

Currently, I am working on creating a login page and signup page for my program. The goal is to stack them on top of each other with only one being displayed at a time. However, I am facing an issue where they are not stacking properly. I attempted using t ...

cssbootstrap-4z-index

Retrieving DOM elements once the div has been updated from the loaded PHP file

My HTML file has a div that receives updates from a PHP file. The PHP file inserts the title and author of a single book into the div successfully. I am attempting to use getElementById to retrieve the title of the book using 'btitle' and the au ...

javascriptjquerygetelementbyid

The functionality of Div.Show is not consistent while the code is running, yet it operates smoothly when the code is

When I trigger a save action, a hidden div is supposed to appear. The structure of this div is like so: <div class="Working" style="display: none;">Message</div> As part of the save process in my code, the following logic is implemented: fun ...

javascriptcssajaxjquery

Implementing JavaScript to import an external file easily

I found this code snippet to change text by clicking on it, but now I want to load the text from an external file text.txt instead of embedding it directly into the page. $(document).ready(function() { $("#div3").click(function() { changtext(); ...

javascriptjqueryajax

detect: matching equal sign within the pattern

I need help with the following query: list[One]=1&list[Two]=2&list[Apple]=fruit I'm using this regex to extract values inside brackets and after the equal sign: preg_match_all('/(?<query>list\[(?<pagename>.*?)\ ...

phpjqueryregexserialization

I am facing an issue with the Tailwind Flowbite Datepicker dropdown UI when running "npm run prod" for minification. The class is not being added during minification on the npm

I have successfully integrated a Laravel project with Tailwind CSS. I have also implemented the Flowbite Datepicker using a CDN to include the necessary JavaScript. Initially, everything was working fine and the date-picker was displaying correctly. Howev ...

javascriptnpmdatepickertailwind-cssflowbite

Properly handling the use of single and double quotation marks in variable declarations within a JavaScript file

I have a search box where users can enter their search text. For example, they can type book, 'book', or "book". The value entered in the search box is then assigned to a variable in the JavaScript file. var searchTerm = "${searchTerm}"; <br/ ...

javascriptjqueryajax

What's the reason this picture isn't displaying in its full size?

I am having trouble adjusting the size of this image to fit the full width, but there seems to be some remaining space on the right side. Category: CSS/HTML /* Header */ .header { background: url('https://picsum.photos/1920/1080') center ...

htmlcssbootstrap-4

What is the best way to display my images within Material UI Cards using React with Typescript?

I'm currently faced with a challenge of rendering images within Material UI's cards. I am successfully passing props to each card from a constants.tsx file where the heading, description, and bodyHeader are all properly read, but for some reason, ...

javascriptreactjstypescriptimage