Tips for creating a static table header without relying on JQuery and with minimal CSS options

Hey there, I'm currently in need of a solution for fixing a table header in place. I've tried a few strategies, but unfortunately, they haven't worked due to specific functionality limitations.

  • One approach involved copying the header and adjusting its position based on scrolltop

(however, this method presented issues with input texts within the header. Cloning the header also cloned the input form, resulting in incorrect session values being sent to the server-side.)

  • Another attempt involved using overflow-y to enable content scrolling

(unfortunately, this strategy posed challenges related to cell sizes being dependent on the header size. When applying position:absolute, the cell sizes didn't align with the header size. Setting fixed lengths was complicated as cells are dynamically generated.)

By the way, please refrain from suggesting jQuery plugins as I am working with legacy code and need to find a custom solution. Any fresh ideas would be greatly appreciated!

jqueryhtmlcss

Answer №1

Update:

Check out this link (not my original idea)

I have tested this method on chrome and firefox, and it works for me. While I understand it may not be the best approach, I believe it is worth sharing.

Code Snippet:

<table>
        <thead>
            <tr><th>head1</th><th>head2</th></tr>
        </thead>
        <tbody>
            <tr><td>row1 col1</td><td>row1 col2</td></tr>
            <tr><td>row2 col1</td><td>row2 col2</td></tr>
        </tbody>
    </table>

CSS Styling:

    table{
        height:2000px;
    }
    thead tr {
         position:fixed;
         left:0;
         top:0;
    }


Revision (based on feedback)

Updated Code:

<div id='wrapper'>
        <table>
            <thead>
                <tr><th>head1</th><th>head2</th></tr>
            </thead>
            <tbody>
                <tr><td>row1 col1</td><td>row1 col2</td></tr>
                <tr><td>row2 col1</td><td>row2 col2</td></tr>
            </tbody>
        </table>
    </div>

CSS Styles:

#wrapper{
        height:500;
        overflow:scroll;
        width:400px;
        margin:0 auto;
        background:Gray; 
    }
    table{
        height:2000px; 
    }
    thead tr {
        position:fixed; 
        top:0;
    }

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

Finding the div associated with the element that triggered an event

I've recently launched a website that allows users to post questions and receive responses from others. Each question is housed in a div, which then contains another div with the CSS property of display: none. Within the main div, there's a butt ...

jqueryhtmlcss

Automated resizing of neighboring column width to accommodate an abundance of elements in a grid view

On my ASP.NET page, I have set up two columns within a table. The first column features a Grid View that pulls data from a SQLDATASOURCE in the database. In the second column, I have placed textboxes, checkboxes, and buttons. However, when I view the pag ...

c#asp.netcss

How to implement mouseover and mouseout with jQuery for an AJAX-loaded element

I have tried calling 4 different div elements using ajax within a div with the class "displaycat". I have written a jQuery function for mouseenter and mouseleave events for these div elements but it doesn't seem to work. Below is the code. Interesting ...

jqueryhtmlajax

Escaping an equal sign in JavaScript when using PHP

I am currently working on the following code snippet: print "<TR><TD>".$data->pass_name."</TD><TD><span id='credit'>".$data->credit_left."</span></TD><TD><input type='button' val ...

phpjavascripthtmlajax

The issue of ngModel not binding to the value of ion-select in Angular Ionic

Having an ion select outside of a form with an ngModel attribute bound to "selectedValue", I encounter an issue where my selections are not being properly populated in the selectedValue variable even though they appear in the ionChange method. The main pur ...

htmlangulartypescriptionic-framework

How to achieve a reverse slideToggle effect with jQuery when refreshing the page

After creating a custom menu on Wordpress using jQuery slideToggle to toggle dropdown on hover, everything seemed to be working perfectly. However, I noticed that when I refreshed the page while moving my cursor between two menu items with dropdown menus, ...

javascripthtmljquerycsswordpress

Is there a way to maintain image proportions when resizing the window?

I'm in the process of developing a classroom-themed website with interactive overlaying images. The goal is to have various pictures that users can click on to access different resources from different websites. My main challenge right now is getting ...

htmlcss

Accessing a specific child div within a parent div using JavaScript and CSS

Struggling to target and modify the style of the child div within id="videoContainer" <div id="videoContainer"> <div style="width: 640px; height: 360px"> <------- this is the target <video src ...

javascripthtmlcssecmascript-6

Google Maps API - Custom Label for Map Markers

I am trying to implement a custom map on my website, and everything seems to be working fine except for one issue. The red marker on the map needs to have a label, but I don't want to use an additional image as an icon. Is there a way to add a label ...

javascriptjquerygoogle-mapsgoogle-maps-api-3

Perform a database query upon clicking a link while simultaneously loading the link's URL

Query: Can a database query be triggered using an <a> tag while still directing the visitor to the <a> tag's URL? One approach could involve directing all links to a specific page that stores the URL of the link. Before redirecting the us ...

javascriptjquerymysqlajaxcoldfusion

Adding hyperlinks that do not redirect

I have 2 separate divs displayed on a website: <button class="form-control margin btn btn-warning hide_all" id="addLinks">Link Pages</button> <button style="display: none" class="form-control margin btn btn-primary hide_all" id="hideLinks"& ...

javascriptjqueryhtmllaravel-blade

What could be the reason for the unexpected outcome when checking if display is equal to "none"?

I have a JavaScript function called "display()". I want to hide my navigation menu on click, but it is not working properly - it just blinks. I am looking for a solution that uses only JavaScript and does not involve querySelector. function display() { ...

javascripthtmlcss

How can I customize the color of the cross in the hamburger menu?

Seeking guidance for a technical issue I'm facing. The problem lies with the X button on the menu - although everything seems to be in order, I encounter an error when attempting to change its color to black. If anyone has insight or advice on how I c ...

javascriptjqueryhtmlcssmenu

Having trouble making Json work with angular.js

I've encountered an issue while trying to retrieve forecast information from an external domain. Despite having both Angular and jQuery loaded, the HTML remains empty with no error messages reported by Chrome. var currentCityread = "Eindhoven ...

javascriptjqueryajaxjsonangularjs

Concealing and revealing the sidebar container

I created a website here and needed to implement a button in the header to hide and show the sidebar. Unfortunately, my current code is not working. Here is what I have attempted: <div id="B"> <button>toggle</button> </div> $ ...

javascriptjqueryhtmlcss

On the initial page load, Magento is failing to load the CSS properly

I've been tinkering with the Magento website over at For some reason, the CSS on the Home page doesn't load initially, but it loads fine when you click on any other link like Products or Gallery. Any ideas why this might be happening? Thanks in ...

cssmagentoload

Creating an Array in PHP using a foreach loop

I'm currently facing an issue while trying to construct an array that I need to output using JSON. Strangely, the array only ends up containing one element even though there are multiple email addresses associated with the object. Despite the fact tha ...

phpjqueryarraysjson

Firefox fails to trigger HTML drag event

After successfully implementing draggable header columns on a table using Chrome as my browser, I encountered an issue when testing it in Firefox (version 17.0.1). It seems that the drag event does not fire in Firefox, although the dragstart event does. ...

javascriptcsshtmlfirefox

Can anyone help me troubleshoot this issue with uploading external JS scripts into my HTML code?

I'm currently facing an issue with my HTML document where the external js file is not loading. Here's a snippet of the HTML: <!DOCTYPE html> <html> <head> <title>...</title> <meta name="viewport" conten ...

javascripthtml

Achieve smooth scaling of font size in CSS according to body width without the need for JavaScript

Can the font size be smoothly scaled in relation to the width of the body or parent element? I am seeking a solution that does not involve javascript. Is it feasible to relate rem to a specific width? ...

cssresponsive-designfont-size