Ensuring that the initial column of a table remains in place while scrolling horizontally

Thank you for taking the time to read this. I am currently working on a table within a div container (div0) where the data is dynamically generated, resulting in a table with unpredictable height and width. The outer div allows for both vertical and horizontal scrolling to navigate through the entire table. However, I have a specific requirement to keep the first column of the table fixed horizontally when scrolling horizontally; this means that while the rest of the columns scroll, the first one remains in place. Could you provide some guidance on how to achieve this?

My initial idea involves separating the contents of the first column (which should not scroll horizontally) into a separate div (div1), while placing the scrollable content in another div (div2). Both of these divs would be placed within a table row containing two cells. However, I have encountered two issues with this approach: firstly, the scrollbar from div2 overlaps inside div0 when scrolling right (I considered using a jQuery scrollbar but need help positioning it outside div2); secondly, there are alignment issues between the two divs.

javascriptjquerycsshtml

Answer №1

If I understand correctly what you're searching for, I have recently worked on a similar project.

The HTML code might resemble the following:

<table border="1" id="header">
    <tr>
       <th></th>
       <th></th>
    </tr>
 </table>
 <div id="tableData">
   <table border="1" id="table">
       <td></td>
       <td></td>
   </table>
 </div>

For the CSS styling:

#tableData {
   overflow: scroll;
   overflow-x:hidden;
   height: 190px;
   border-bottom: 1px solid #B5B3B3;
   width: 940px;
}

Here is some JavaScript to ensure proper alignment between the header and table data:

$("#tableData").height(190);
$("#tableData").width(940);
for(var i=1;i<8;i++){
    if($("#header th:nth-child("+i.toString()+")").width() >= $("#table td:nth-child("+i.toString()+")").width())
        $("#table td:nth-child("+i.toString()+")").width($("#header th:nth-child("+i.toString()+")").width());
    else
        $("#header th:nth-child("+i.toString()+")").width($("#table td:nth-child("+i.toString()+")").width());
}
$("#tableData").width($("#table").width()+20);
if($("#table").height() <= $("#tableData").height()) 
   $("#tableData").height($("#table").height());

You may need to make adjustments depending on your specific requirements. The 'i' variable in this example is configured for 7 columns.

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

Use jQuery to update information in a table based on a unique identifier

In my Laravel project, I have a table where data needs to be updated in a specific row without reloading the page using jQuery. The data is supposed to be updated in the row: .... <tbody> @foreach ($tasks as $task) <tr> <td&g ...

jqueryajaxlaravelbootstrap-modallaravel-blade

Tips for displaying an HTML page using JavaScript

In my project, I am working with an .html file (File X) that needs to immediately open another .html file (File Y) based on a certain value. Could someone provide guidance on the best way to achieve this using JavaScript? Additionally, I would like the pa ...

javascripthtml

What happens if I don't associate a function or method in the React class component?

Take a look at this straightforward code snippet that updates a count using two buttons with different values. import "./App.css"; import React, { Component } from "react"; class App extends React.Component { // Initializing state ...

javascriptreactjsreact-native

What is the best way to generate a JSON object with Angular and showcase its content through HTML?

Currently, I am dealing with a JSON object that is completely unfamiliar to me. Without knowing the keys or values of this object, I was able to successfully manipulate it and extract the necessary information. Ultimately, I have generated an array (whic ...

htmljsonangulartypescript

The edges of shapes created with ThreeJs appear to have a fuzzy or blurred outline

Trying to create a cube in ThreeJs using Box Geometry, but encountering strange and shaky lines. Even setting wireframe to false doesn't resolve the issue, as the edges remain problematic. https://i.sstatic.net/sUPAX.png Currently utilizing WebGlRen ...

javascriptthree.js

I must create a dropdown and lift up feature similar to the one provided in the example

I am looking to implement a drop-down navigation bar on the top right and a pop-up button/links on the top left. The drop-down menu should appear when the screen size reaches a certain pixel width. If you can't see the drop-down navigation (NAV), adju ...

javascriptandroidjqueryhtmlcss

The CSS syntax definition for list styles

Inside the body of my site is this code: Here is the HTML: <ul id="navlist"> <li class="first"> <a href="/" id="current">Home</a> </li> <li> <a href="/Store/">Store</a> </ ...

htmlcsssyntax

Utilizing the change function in conjunction with that

My attempt at creating a simple function to implement the change function didn't go as planned:/ What I am trying to achieve: 1- When a cost checkbox is checked, assign the corresponding cost (e.g., cost1.checked ? cost1 = 10 : 0) 2- Calculate and di ...

javascriptjquery

Firebase Operation Not Supported Error in next.js (auth/operation-not-supported-in-this-environment)

After successfully deploying a Next.js app hosted on Vercel with Firebase authentication that functions properly for users, I encountered a mysterious error during the "npm run build" phase: FirebaseError: Firebase: Error (auth/operation-not-supported-in ...

javascriptnode.jsfirebasenext.jsfirebase-authentication

Converting text to JSON using JSONP with jQuery's AJAX functionality

Potential Duplicate Question 1 Possible Duplicate Inquiry 2 I have been searching for a definitive explanation on JSONP across various questions but haven't been able to find one yet. For instance, I am attempting to make a cross domain request us ...

javascriptjqueryajaxjsonjsonp

My website's links are fully functional with Mozilla Firefox, providing a seamless browsing experience for users

When accessing my website using Google Chrome, Safari, and Internet Explorer from different computers in various locations, I noticed that certain links do not work properly. Surprisingly, these links function perfectly when using Firefox. For instance, o ...

htmlwordpress

The Javascript function will keep on executing long after it has been invoked

I am currently facing an issue with calling a JavaScript function within an AJAX call. The progress function below is supposed to be executed every time the for loop runs. However, the problem is that although progress is being run as many times as the for ...

javascriptajax

The size of Bootstrap 3 columns adjusts dynamically based on the width of the window as the page is being

I am facing an issue with the layout of my bootstrap site when resizing the 3 horizontal columns based on the window size upon page load. Currently, I have a script that adjusts the height of each column to match the tallest one so they appear uniform whe ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a different method to position an element in the center of the webpage?

Typically, the code margin:auto is used for centering, but I have a different code below. HTML : <article> <header></header> </article> CSS: article{ max-width: 500px; margin: auto; /* centered - nice */ } header{ width: ...

css

Unable to receive AJAX response for the GET request

I am attempting to achieve the following: Upon clicking on H1, jQuery is supposed to retrieve information for a specific key from the server and display it in a prompt. The PHP code resides in server.php. $link = mysql_connect("mysql.hostinger.com.ua", "_ ...

phpjqueryajaxjson

The first Ajax request is successful, however, the final one is failing to properly pass the data to the designated page

I have encountered an issue with two parsing scripts. The message.php script works without any problems, but when attempting to send data to data.php, the following error occurs: "Notice: Undefined index: userid in D:\xampp\htdocs\metro&b ...

phpjquerymysqlajax

Unleashing the Power of Lodash Debounce in Vue

Currently, I have integrated debounce from lodash into my main.js file. import lodash from 'lodash' Vue.prototype._ = lodash I've been utilizing it like this._.find(...), and everything has been functioning smoothly. However, when attemptin ...

javascriptvue.jslodash

Utilizing AngularJS's $http.get to fetch video IDs and then combining them with the /embed endpoint through the ng

Currently, I am utilizing $http.get to retrieve a list of videos from YouTube using the API endpoint 'MY_API_KEY'. The goal is to construct a link with the video ID in the format: "{{videoID}}". However, extracting the videoID proves to be chall ...

javascriptangularjsiframevideoyoutube

The issue with Grid component in Nested Single file Component

I'm currently working on creating a grid component in Vue to set up a sortable and searchable chart using Single File Component. I've also integrated vue-router into the project. Below are my two .vue files. At the moment, I can only see the sear ...

javascripthtmlvue.jsfrontendvue-component

How can you prevent the 'Script not responding' error when using Reverse AJAX / Comet?

My worker thread is responsible for sending requests to the server using XMLHttpRequest. The request is directed to a php file which checks the integrity of client information. If the client requires new data, it is sent. Otherwise, the server continuously ...

phpjavascriptajaxcometreverse