navigating through a specific section of a data chart

I need the first column of a table to stay fixed while the rest of the columns scroll horizontally. Here's the code I have:

<div id="outerDiv">
    <div id="innerDIv">
        <table>
           <tr><td>1</td><td>India</td><td>New Delhi</td></tr>
           <tr><td>2</td><td>USA</td><td>NewYork</td></tr>
           <tr><td>3</td><td>France</td><td>Paris</td></tr>
           <tr><td>4</td><td>Japan</td><td>Tokoyo</td></tr>
           <tr><td>5</td><td>China</td><td>Beijing</td></tr>
           <tr><td>6</td><td>UK</td><td>London</td></tr>
        </table>
    </div>
</div>

I attempted this CSS but it didn't work:

 #outerDiv
{
width:130px;
overflow-x:scroll;
 overflow-y:hidden;
 margin-left:30px;
 position:relative;

}

#innerDIv
{
margin-left:-30px;
}

If you have any suggestions on how to achieve this, please let me know. Thank you.

Answer №1

Regrettably, the overflow complication within TBODY doesn't seem to be compatible with IE8 (which remains widely used as the most recent version available on Windows XP).

I encountered the challenge of ensuring compatibility across various browsers (especially since the table was set to 100% width, adding complexity), and resorted to utilizing a significant amount of javascript to align each column within the two tables (one for the header and one for the content).

I use the term 'attempt' because depending on the cell contents, the alignment could either succeed or fail miserably...

While I don't have executable code readily available, below is the snippet that effectively aligned the nine columns in that specific project.

var tab1 = $('#table_top');
var tab2 = $('#table_bottom');

$(tab1).width( $(tab2).width()+'px' );
var offset = tab2.offset()
$(tab1).css({'left':offset.left+'px'});

var rows = $('#table_bottom tr:eq(0)');
var c0 = $( rows ).find("td:eq(0)").width();
var c1 = $( rows ).find("td:eq(1)").width();
var c2 = $( rows ).find("td:eq(2)").width();
var c3 = $( rows ).find("td:eq(3)").width();
var c4 = $( rows ).find("td:eq(4)").width();
var c5 = $( rows ).find("td:eq(5)").width();
var c6 = $( rows ).find("td:eq(6)").width();
var c7 = $( rows ).find("td:eq(7)").width();
var c8 = $( rows ).find("td:eq(8)").width();

rows = $('#table_top tr:eq(1)');
$( rows ).find("th:eq(0) div:eq(0)").width( c0+"px" );
$( rows ).find("th:eq(1) div:eq(0)").width( c1+"px" );
$( rows ).find("th:eq(2) div:eq(0)").width( c2+"px" );
$( rows ).find("th:eq(3) div:eq(0)").width( c3+"px" );
$( rows ).find("th:eq(4) div:eq(0)").width( c4+"px" );
$( rows ).find("th:eq(5) div:eq(0)").width( c5+"px" );
$( rows ).find("th:eq(6) div:eq(0)").width( c6+"px" );
$( rows ).find("th:eq(7) div:eq(0)").width( c7+"px" );
$( rows ).find("th:eq(8) div:eq(0)").width( c8+"px" );

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

The filter() function seems to be failing to produce any results even though the callbackFn is functioning properly

I've created a function to filter certain JSON elements in an array using Vue 3. Here is the data structure: [ { "UID_Person": "160a5b9e-c352-39e3-802b-9cfcc126da77", "FirstName": "Maxi", ...

The use of Jquery's $.ajax function is causing an internal server error

I can't seem to figure out what I'm doing wrong in this code snippet. <script type="text/javascript"> $(function () { $("li").bind("click", function () { var sel = $(this).attr('id').toString ...

Overrule the child element selector using a class identifier

I'm facing an issue where the descendant selector is overriding my .red_p class. Is there a way to prevent this from happening without having to assign a class to each p element individually? HTML: <html> <head> <style> ...

Passing a JSON object between pages in Next.js using props during programmatic navigation

In my Next.js project, I have two pages. On the first page, the user fills out a form to create a post. The information is stored in a large JSON object, which needs to be passed to the second page for the user to preview the post before finalizing it. Wi ...

Is it time to go back to the parent selector using the ampersand symbol?

I recently started using Less for writing CSS, and it has definitely been a time-saver for me. However, I have encountered a small issue with my code: <a href="#" class="btn-black-bg btn-right-skew">largest fight gym in Australia</a> Less .b ...

Utilizing a Custom Validator to Compare Two Values in a Dynamic FormArray in Angular 7

Within the "additionalForm" group, there is a formArray named "validations" that dynamically binds values to the validtionsField array. The validtionsField array contains three objects with two values that need to be compared: Min-length and Max-Length. F ...

Hiding the author, category, and date information from displaying on WordPress posts

After creating a Wordpress blog site and adding the category widget to the right sidebar as a drop down, I realized that I needed to customize its layout in terms of colors and design. However, I am struggling to find out how it can be done, which .php fil ...

Calculate the quantity of rows within a specific div container

Looking at the image provided, there are multiple divs inside a main div. I am trying to figure out how many rows the main div contains. For instance, in this particular scenario, there are 5 rows. It is important to mention that the inner div is floated ...

What causes a globally declared array to remain empty in the global scope even after data is pushed to it within a callback function?

Initially, I set an empty array as the value for the global variable artistURLs. Then, within the Cheerio .each() iterator method, I push strings (stored in the local variable artistURL) into the artistURLs array. var request = require('request&apos ...

Encountering a 404 (Not Found) error in Laravel while attempting to load UI content using AJAX

Currently, I am attempting to implement a UI loading functionality within a dashboard using AJAX. The main objective is to refresh the UI without having to reload the entire page by clicking on a ul. This feature works perfectly with regular PHP, but when ...

Material-UI icons refusing to show up on the display

I've been working on creating a sidebar component and importing various icons to enhance the UI, but for some reason they are not displaying on the screen. I even tried other suggested solutions without success. <SidebarOption Icon = {InsertComment ...

What causes the jQuery.easing error to happen when jquery-ui is being used?

After adding dependencies to achieve the add to cart effect in our project, I checked the package.json and found the following installed: "jquery": "^3.4.1", "jquery-ui": "^1.12.1", I then imported these into the co ...

Dynamically Adding Filenames in Vue.js with v-for Iteration

I'm currently facing an issue with dynamically adding inputs to my Vue 3 application. Specifically, I have a component that adds both text and file inputs dynamically. While the text input works flawlessly using v-model, the file input requires me to ...

Easy Ways to Personalize the Appearance of Your Material-UI Tab Indicator

I've been working on customizing the tab indicator in material-ui and so far I've only been able to make rectangular or square shapes. I'm wondering if there's a way to turn it into an arrow or an upside-down triangle instead? Here is ...

Displaying images dynamically in a gridview from a hard drive source

I am facing an issue trying to dynamically retrieve an image from my hard drive. Despite creating the dynamic path correctly, the image is not displaying. The root cause of this problem lies in the fact that I am developing a back-end system for a website ...

Tips for utilizing the "get" method in React to submit a form

Is there a way to submit a form using the "get" method to an external URL in react? Similar to how it is done in HTML like in this example: https://www.example.com/form But instead, to a third party URL...? Can I achieve something like this? The goal is ...

What is the most effective method for embedding a Kotlin program into a website?

I have created a combat simulation tool in Kotlin for an online gaming community. Users can input the combat levels of two players, choose the number of duels to simulate, and then initiate the simulation which will provide win percentages and other stats. ...

Ways to verify user authentication for navigating Vue routes

Working on a Single Page Application with Vue front-end, Express, and Parse (parse-platform) for back-end. After authenticating the user, I store their info in a session variable req.session.user = result; before sending it back to the client using res.sta ...

Executing an ajax post when a user clicks on a link or button

<tr> <td> <span id="id_1"> <a href="/Path" >Name</a> <a href="#">Delete</a> </span> </td> &l ...

Rapid HTML coding dilemma

Currently, I am in the process of quickly marking up my webpage. One issue I am facing is that I would like my title to be displayed below my <nav> tag instead of beside it. Can anyone provide guidance on how to achieve this? Here is the current HT ...