Persistent table header and fixed column in table

Trying to create an HTML table with a fixed header and fixed first two columns, but encountering issues with the table displaying at the top of the page instead of below a div with a yellow background. Looking for a solution similar to the one shown in the JSFiddle link provided.

Check out the demo here: http://jsfiddle.net/praveen_programmer/z3bzv9j8/1/

The current CSS code has the header of the table displaying at the top of the page. The goal is to have the table with the header displayed below a div with a yellow background. The content within the div will be dynamic and may increase in size.

Here is the CSS being used:

.tblTitle{
   position:absolute;
    top:0px;
    margin-bottom:30px;
    background:lightblue;
}
td, th{
    padding:5px;
    height:40px;
    width:40px;
    font-size:14px;
}

#vertical_scrolling_div{
    display:inline-block;
    zoom: 1;
    *display:inline;
    padding-top:40px;
    height:300px;
    overflow-y: scroll;
    overflow-x: hidden;
}

#freeze_container{
    display:inline-block;
    zoom: 1;
    *display:inline;
    vertical-align:top;
    width:100px;
}
#horizontal_scrolling_div{
    display:inline-block;
    zoom: 1;
    *display:inline;
    width:200px;
    overflow-x:scroll;
    vertical-align:top;
}

.freeze_table{   
    background-color: #0099dd;
    z-index:2;
}

#left_table{
    width:100px;
}

#inner_table{
    width:400px;
    overflow:hidden;
}

Here is the JavaScript code:

$(function(){  
    function getRows(rows, cols){
        var rowString="";
        for(var i=0;i<cols;i++){
            rowString+="<tr>"; 
            for(var j=0;j<rows;j++){
                rowString+="<td>"+j+","+i+"</td>";
            }
            rowString+="</tr>"; 
        }
        return rowString;
    }

    $("#left_table").append(getRows(2,10));
    $("#inner_table").append(getRows(8,10));
});

And here is the HTML code:

<div style="height:100px;background-color:yellow;">Test-1</div>

<div id="vertical_scrolling_div">
    <div id="freeze_container">
        <table id="left_table" class="freeze_table">
            <tr class='tblTitle'>
                <th>Title 1</th>
                <th>Title 2</th>
            </tr>
        </table>
    </div>
    <div id="horizontal_scrolling_div">
        <table id="inner_table">
            <tr class='tblTitle'>
                <th>Title 3</th>
                <th>Title 4</th>
                <th>Title 5</th>
                <th>Title 6</th>
            </tr>
        </table>
    </div>

Answer №1

I have made some updates to your code to meet your specific requirements. The table header will now remain fixed at the top of the div.

.tblTitle{
    position:absolute;
    background:lightblue;
    top: 0;
}
.vertical_scrolling_div {
    position: relative; /* all other code remains unchanged */
}

JavaScript

$('#vertical_scrolling_div').scroll(function() {
    $('.tblTitle').css('top', this.scrollTop+"px");
});

https://jsfiddle.net/z3bzv9j8/9/

Answer №2

The alignment of your headings seems off due to the use of absolute positioning on your header tags. You should consider changing it to relative positioning on your .tblTitle tag. This will ensure that the headings are displayed below the Yellow div. Once this is done, feel free to apply the necessary styling to achieve the desired look and feel.

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

What is the reason for parent rows not stretching fully across the width of the page?

I am working on creating a simple table in Vue.js with Bootstrap. When the arrow is clicked, the child row is displayed, and I want it to appear below the parent row. I achieved this by setting display:flexbox; flex-direction:column; Here is the HTML tabl ...

My Discord bot seems to be malfunctioning and failing to send out

I am new to discord.js and I'm having trouble getting my bot to respond with a message when I send one on the server. The bot shows as online in Discord and "Logged in!" appears in the console when I run it, so client.on("ready") seems to be working f ...

The object is given a value in the form of a string, even though it is a strongly-typed variable

I'm encountering something unusual in my code. In the following example, there is a (change) event that captures the current value selected by the user from a dropdown menu. <div style="padding-right: 0; width: 100%;"> <label st ...

The Magic of jQuery Cross Site Fetch

It seems like this should be simple, but I am having trouble figuring it out... I'm using jQuery to fetch a remote page from a different server, grab the HTML content, and then insert that content into a hidden DIV. However, when I try to do this wit ...

Strategies for injecting data into VueJS components after the page has fully loaded

My project utilizes Vue.js and Nuxt.js, and within the settings page, users can modify their personal settings. This single page allows users to navigate between tabs. <template> <div class="account-wrapper"> // Code content he ...

Despite setting the date format in the Html Helper, the MVC still presents a validation error

When creating a razor view form to display the date field, I am using the following code: @Html.TextBoxFor(m => m.LectureDate, "{0:dd/MM/yyyy}") The desired date format is 21/04/2017, which is set by JQuery DatePicker. However, after setting the date ...

How to position menu on the right side using bootstrap

Hello everyone, as a newbie I have been struggling to align my navigation menu to the right while keeping the logo on the left side. I have tried multiple approaches without success. Currently, I am working with Bootstrap 4.7 and using the navbar code in ...

having difficulty accessing the value within the Angular constructor

My current issue arises when I click on a button and set a value within the button click method. Despite declaring the variable in the constructor, I am unable to retrieve that value. The code snippet below demonstrates this problem as I keep getting &apos ...

The implementation of jQuery within an included HTML file may not function properly

I'm looking to implement the use of includes for generic HTML elements in my project. However, I've run into an issue where including an HTML file causes jQuery to stop working. Here is a snippet of my code that illustrates the problem. Specifica ...

Close the menu located in the menu bar under the Home section

I am struggling with creating the bootstrap collapse menu. <div className='collapse' id='mobile-menu'> <button clasNames='navbar-toggler' type='button' data-togg ...

MongoDB and Node.js encounter unexpected outcomes due to undefined variables

I am trying to retrieve data from my collection called students within the pool database in MongoDB. Despite having a successful connection to the database, when I use console.log(result.lastname), it returns undefined. Below is an excerpt from my server ...

Struggling to forward POST Request using Express and EJS

I'm currently developing an application using Node.js, Express, and EJS. The goal is to have the app redirect users to a different page (for example, from localhost:3000/ to localhost:3000/about) upon clicking a button. Despite successfully receiving ...

The functionality of the AJAX Script is failing to load properly on mobile devices

Currently, I am undertaking a project that involves ESP32 Arduino programming to create a webpage where users can interact with buttons to activate relays. Additionally, I have implemented a slider using a short script. This project is inspired by the ESP3 ...

jQuery is working perfectly on every single page, with the exception of just one

Check out my code snippet here: http://jsfiddle.net/9cnGC/11/ <div id="callus"> <div class="def">111-1111</div> <div class="num1">222-2222</div> <div class="num2">333-3333</div> <div class="num3">444-4444< ...

Delayed AJAX request impedes following page loading

When a user requests a report on my application, a jQuery AJAX call using .load() is made to a file that performs extensive number crunching and MySQL requests. It typically takes 5-6 seconds to load, during which .ajaxStart() and .ajaxStop() are used to d ...

Struggling to figure out how to successfully implement the FadeTo method alongside the window scroll event -

I am currently working on a one-page website where I want each section to fade in and out based on the scroll position. Rather than using FadeIn/FadeOut, I am utilizing the FadeTo method to maintain the sections as display:block. The concept is to make ea ...

"Stuck in a Standstill: Express/React Commit

Currently, I have set up an Express backend server on port 5000 along with a React frontend running on port 3000. My goal is to fetch some data from an Express post route and return it to the frontend, however, I am encountering an issue where my Promise n ...

Disable menu bar | customize menu bar in electronJS

I am developing an Angular application with Electron.js. Due to the specific design requirements of my app, which is browser-based, I do not require or want the default Electron.js menu or menu bar to be displayed. Is there a way to remove it from my app ...

react tried to recycle markup error

Working on server-side rendering with React, encountering an error mentioned below. Here is the context: I have 2 React components, each stored in its own separate folder: - react-components - component-1-folder - component-1 - component-2-fo ...

D3 not distinguishing between bars with identical data even when a key function is implemented

When attempting to create a Bar chart with mouseover and mouseout events on the bars using scaleBand(), I encountered an issue. After reviewing the solution here, which explains how ordinal scale treats repeated values as the same, I added a key to the dat ...