Lock the initial column in an HTML table

Hey there! I've been trying to freeze the first column of my HTML table, and while I managed to do so after a few attempts, I encountered an issue. When I scroll the table horizontally, the columns on the left seem to overlap with the first column, and I can't figure out how to fix it. Could you lend me a hand with this? You can test it out using this CodePen.

CSS:

table {
    width: 100%;
    position: relative;
    overflow: hidden;
    display: block;
}
thead {
  width: 100%;
  display: block;
  position: relative;
  overflow: visible;
}
thead th:nth-child(1) {
  position: relative;
  display: block;
  min-width:200px;
}
tbody {
    width: 100%;
    position: relative;
    display: block;
    max-height: 307px;
    overflow: scroll;
}
tbody tr td:nth-child(1) {
  position: relative;
  display: block;
   min-width:200px;
}
table th, table td {
  min-width: 150px;
  max-width: 150px;
  padding: 2px 3px;
  text-align: left;
  text-overflow: ellipsis;
  border: 1px solid #e1e1e1;
}

JS:

$(document).ready(function() {
  $('tbody').scroll(function(e) {
    $('thead').css("left", -$("tbody").scrollLeft());
    $('thead th:nth-child(1)').css("left", $("tbody").scrollLeft());
    $('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft());
  });
});

Answer №1

Is it possible to define the background-color specifically for the first column?

table th:first-child,
table td:first-child {
  background-color: #fff;
}

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

How can you access the URL of a resource action in Angular?

In my Angular application, I have created a resource named 'Files' with the following definition: app.factory('Files', function($resource) { return $resource('/api/accounts/:account_id/sites/:site_id/files/:file_id'); }); ...

Having trouble getting MongoDB to connect correctly to my server (using node.js and express), any help would be greatly appreciated

Whenever I make an API request using Hoppscotch, I encounter a terminal error along with status code 500 on Hoppscotch. Despite my efforts to fix the issue, it persists. Below is the code snippet that I am currently working with: var mongodb = require(&apo ...

organize multiple blocks in the middle of the page (html)

This code is unique and belongs to me. <html> <head><title>HOME||~All About EDM~</title> </head> <body > <center><img src="edm1.jpg" alt="edm" width="950" height="250"></body></center> <c ...

Reorganizing objects upon insertion in Mongo DB

I am encountering an issue in my Node.js app where MongoDB is causing objects to be reordered when inserting new records into the database. I am using the following insert method: collection.insert(object, {safe:true}, function(err, result) { if (err) ...

A step-by-step guide on integrating a Django template tag and HTML element into an HTML page using Javascript

Is there a safe way to insert HTML that includes Django template tags using JavaScript in my project? For instance, if my template contains the following code: <div id="some-element"> <span id="my-tag">{{ my_data }}</sp ...

I am puzzled as to why my Details Modal keeps appearing whenever I click anywhere, even when I have specifically added it to only show up on the event of today. Additionally, I am encountering

ERROR Function components cannot have string refs. We recommend using useRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref at coerceRef (http://localhost:3000/static/js/bundle.js:59386:21) at createChil ...

Blocking negative values when a button is clicked in Vue.js using v-on:click

How can I prevent the counter from going below 0 when clicked in this Vue component? Do I need to create a separate method to block it? Thank you for your assistance. <button v-on:click="counter.document -= 1">-</button> <h3>{{coun ...

Spin the sphere texture in Three.js

Currently, I am working on rendering a sphere through three.js. While applying a texture to the sphere works well, I am having some difficulties rotating the texture to align it with marker positions. The issue arises when trying to place markers over Kag ...

Ways to retrieve and upload a blob from a file object

After receiving a file object via an HTML input on-change event in my component.html: onFileSelected(event) { this.selectedFile = event.target.files[0]; } Now, I need to send a POST request to upload the image to the database. The database only acc ...

Unable to install npm package from git source

I am attempting to install a package from a git repository that I had previously forked. Here is the command I tried: npm i catsaredoomed/invest-openapi-js-sdk --save-dev Unfortunately, I encountered this error message: npm ERR! prepareGitDep 2> npm W ...

Checkbox option to change background color of table cell

$('#selectall1').click(function(event) { if (this.checked) { $('.first').each(function() { this.checked = true; }); $('.second').each(function() { this.checked = false; }); $('.third&apos ...

Updating part of a page while also changing the navigation

Apologies in advance, as this is my first attempt at coding a website. I have a specific need where I want to update only one div on my web page when a link in the navigation bar is clicked. <body> <div id="wrapper"> <header id= ...

Div's background image displays flawlessly on Code Pen desktop, yet fails to appear when viewed on mobile devices

I am currently experiencing an issue with my background images not rendering properly on mobile devices, specifically safari and chrome on iPhone XR. Although they appear to work perfectly on Code Pen - resizing properly as the viewport shrinks and switchi ...

`questioning the unusual behavior of document.onload(), seeking answers`

Before delving into this, let's avoid downvoting as this is not another typical question about window.onload vs document.onload. window.onload triggers once all DOM nodes are fully loaded, while document.onload triggers when all DOM nodes are ready w ...

Allowing users to navigate through a fixed content page using a scrolling menu, all without the need

On my webpage, I have integrated Google Maps. The layout is divided into a menu on the left and content on the right. I am looking to make the left side (menu) scrollable, while the right side (content, which includes the map) remains static without scrol ...

How to position elements within a content block in HTML with a CSS stylesheet

Looking for guidance on how to align text and image within a block in HTML using only a .css file. Specifically, I need the text to be on the left side and the image on the right. Since I am new to CSS, I could use some direction on where to start. Any t ...

Troubleshooting: Ngx-Echarts Animation Issue at Startup

I've been working on integrating ngx echarts into my Angular app, but I'm facing an issue with the animation during the initial load of the chart. Take a look at this Stackblitz example where you can see that the bars render quickly on initial lo ...

Implementing a secure route in Next.js by utilizing a JWT token obtained from a customized backend system

Currently, I am in the process of developing a full-stack application utilizing NestJS for the backend and Next.js for the frontend. Within my NestJS backend, I have implemented stateless authentication using jwt and passport. My next goal is to establis ...

The Angular $rootScope.user.userMessage throws an error stating that it is not an object

I am encountering an issue: Error: The object '$rootScope.user.userMessage' is not defined. (evaluating 'typeof $rootScope.user.userMessage') This error arises from the following code snippet: if (typeof($rootScope.user.userMessage ...

Do we really need to implement ajax in this code snippet?

In my scenario, I have two JSP files named test1.jsp and test2.jsp. The flow of my program goes like this: I need to retrieve data from a textbox in test1.jsp, but the Ajax call is initiated from a different page. My objective is to receive the controller ...