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

Having trouble locating and interacting with the textarea element in Salesforce using Selenium Webdriver

Encountering an issue with the Selenium Webdriver where it throws an error stating that the element is not visible and cannot be interacted with when attempting to access a textarea. 1. The textarea is located within a pop-up window, which can be accessed ...

javascripthtmlseleniumselenium-webdriver

How can you utilize jQuery's .post() method to send information as an object?

When I send a .post() request like this var data = $(this).serialize(); $('form').on('submit', function(event) { event.preventDefault(); $.post('server.php', data, function(data) { $('#data').append( ...

javascriptphpjqueryajax

What is the best way to connect my data with my Backbone Views?

I have successfully set up my views to show test data, and now I want to implement asynchronous data loading to fetch real information. However, I'm a bit confused on the best method to achieve this. Should I manually create AJAX calls? Or maybe utili ...

javascriptjqueryajaxbackbone.js

Obtaining the MasterTableView Edit Form within a Radgrid to acquire a reference to a textbox

Can anyone help me with two things, please? I am struggling to access the currently edited existing row in the Radgrid and also the index of the Edit form when attempting to add a new record to the table. function OnClientSelectedIndexChanged(sen ...

javascriptasp.netajaxtelerikradgrid

"Sweet syntax" for assigning object property if the value is true

In the project I'm working on, I find myself dealing with a lot of parsing and validating tasks. This often results in 5-10+ lines of code like if(value) object.value = value. I considered using object.value = value || (your favorite falsy value) app ...

javascriptecmascript-6

Creating Typescript packages that allow users to import the dist folder by using the package name

I am currently working on a TypeScript package that includes declarations to be imported and utilized by users. However, I have encountered an issue where upon publishing the package, it cannot be imported using the standard @scope/package-name format. I ...

javascriptangulartypescriptpackage

Unable to add elements using .append after clearing the select options with .empty()

I have been attempting to incorporate options dynamically, similar to the example provided here:https://github.com/google/google-apps-script-samples/tree/master/simple_tasks Even though I am using almost identical code, I keep encountering an error every ...

jquerygoogle-apps-script

Adjust the height of the second column in Bootstrap 4 textarea to fill the remaining space

I am facing an issue with my layout where I have 2 columns, one containing some inputs and the other only a textarea. The problem is that I want the textarea in the second column to extend and fill the remaining height of the first column, but so far I hav ...

htmlcssbootstrap-4heightmultiple-columns

Fixing inconsistent font sizes across various browsers

During the development of my website, I couldn't help but notice a significant variance in font sizes between Internet Explorer and other browsers. Here's an example of what my page looks like: I intended for it to resemble the first and second ...

htmlcss

Tips on converting a curl command to Jquery Ajax in the correct way

I'm trying to convert the following CURL Command to Jquery ajax, but I keep getting an error saying Cannot get data In the browser console, it displays the error 401 Unauthorized I've attempted to use a solution from this Source to no avail. cu ...

jqueryajaxcurl

Adding a box shadow around the entire div in Internet Explorer 11 with CSS

I am having difficulty applying box-shadow to create a shadow around the entire perimeter of a div. While it works in FireFox, it does not work in IE 11. So far, I have attempted solutions from this StackOverflow thread. For reference, here is a JSFiddle ...

htmlcssinternet-explorer

Tips for Omitting Children <li> from CSS Design

I'm currently working in SharePoint Designer and facing an issue with custom bullets in my list. My goal is to apply a custom bullet on the parent li elements (Desc 1 and Desc 2), but unfortunately, it's also being applied to all the children li ...

htmlcss

JS URL verification: ensuring valid URLs with JavaScript

Is it possible to combine two scripts that perform separate actions, one clicking a button and opening a new window, and the other interacting with elements in that new window simultaneously? function run() { var confirmBtn = document.querySelector(".sele ...

javascript

How can I switch out an item within FabricJS?

In order to incorporate undo and redo functionality, I have created an array named "history" that stores the most recent changes triggered by canvas.on() events. Displaying console.log: History: (3) […] ​ 0: Object { target: {…} } //initial object ...

javascriptfabricjs

Data sent through AJAX messaging is not being acknowledged

I recently made an AJAX request and set it up like this: $.ajax({ data : { id : 25 }, dataType : 'json', contentType : 'application/json; charset=utf-8', type : 'POST', // the rest of the ...

javascriptphpjqueryajaxjson

Update Json information within VueJsonCSV and VueJS component

I'm currently using the VueJsonCSV component to export data to a CSV file. The values being exported are retrieved from the Vuex Store. <template> <v-btn depressed> <download-csv :data="json_data"> Export Files </downl ...

javascriptjsonvue.jsvue-componentnuxt.js

Unlocking the intricacies of navigating through nested arrays of objects in JavaScript

I need help figuring out how to loop through a nested array of objects in my code. I've tried different approaches but can't seem to grasp how it works. The object data I have looks like this: [ { "restaurantName":"Bron ...

javascriptarraysloopsobjectnested

Is there a way to customize the hamburger icon for the navigation bar in Bootstrap 4?

Struggling to update the icon in the Navbar for bootstrap 4. Here's my current HTML: <nav class="navbar fixed-top navbar-expand-md navbar-custom"> <a class="navbar-brand" href="#"> <img src="images/logo.svg" width="60px" style="m ...

htmlcsstwitter-bootstrap

Discover every user receiving a database object instead of individual records with mLab

While using my express application with the mLab database, I encountered an issue. When trying to find only one record, everything works fine. However, when attempting to retrieve a list of users from the database, I receive the following response. Query ...

javascriptnode.jsmongodbexpressmlab

Validating SASS based on class name

Hi there, I am fairly new to SASS and do not consider myself a programming expert. I have ten aside elements that each need different background colors depending on their class name. Even after going through the SASS documentation, I am still unable to f ...

cssclassvariablessassmixins