What is the best way to ensure the first column of a table remains fixed while allowing the remaining columns to scroll?

As part of my dynamic table creation process, here is the code that gets generated after the loops are executed.

<table class="guide-table" bordercolorlight="#EEEEEE" bordercolordark="#EEEEEE" id="channels-table" width="2500px" bordercolor="#EEEEEE" border="10">
    <tbody>
        <tr id="headerRow">
            <td id="date" class="">Mon, 9 Feb</td>
            <td>12:00 AM</td>
            <td>12:30 AM</td>
            <td>01:00 AM</td>
            <td>01:30 AM</td>
            <td>02:00 AM</td>
            ...
            <td>11:30 PM</td>
        </tr>
    </tbody>
    <tr>
        <td><img src="http://cps-static.rovicorp.com/2/Open/SonyTV%20Logos/NY1/NY1.png?partner=neeveecommunicationbms545xngmh4n3azd8ws3tjx" width="100px" height="35px"></td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        ...
        <td>EMPTY</td>
    </tr>
    <tr>
        <td><img src="http://cps-static.rovicorp.com/2/Open/SourceLogos/400x300/WillowTV.png?partner=neeveecommunicationbms545xngmh4n3azd8ws3tjx" width="100px" height="35px"></td>
        <td>EMPTY</td>
        ...
        <td>International Test Cricket: Day 4: South Africa vs. Sri Lanka (08:00)</td>
        <td>EMPTY</td>
    </tr>
    <tr>
        <td><img src="http://cps-static.rovicorp.com/2/Open/SonyTV%20Logos/NDTV/NDTV.png?partner=neeveecommunicationbms545xngmh4n3azd8ws3tjx" width="100px" height="35px"></td>
        <td>EMPTY</td>
        ...
        <td>EMPTY</td>
    </tr>
</table>

I'm looking for a way to make the first column in the table static. I've tried using a fixed table header plugin without success. Any suggestions or help would be greatly appreciated.

Answer №1

The solution to your question can be found here: creating an HTML table with a fixed left column and scrollable body.

        body { font:14px Arial;}
        table { border-collapse:collapse; border-top: 2px solid black; }
        td, th {
            margin:0;
            border:2px solid black; 
            border-top-width:0px; 
            white-space:normal;
        }
        div { 
            width: 500px; 
            overflow-x:auto;  
            margin-right:3em; 
            overflow-y:visible;
            padding-bottom:2px;
        }
        .fixed-col {
            position:fixed; 
            width:4em; 
            left:0;
            top:auto;
            border-right: 1px solid black; 
            border-top-width:2px; 
            margin-top:-2px;
        }
        .fixed-col:before {content: 'Column ';}
<div><table>
        <tr><th class="fixed-col">A</th><td class="cell-data">12345</td><td class="cell-data">67890</td></tr>
        <tr><th class="fixed-col">B</th><td class="cell-data">ABCDEFGHIJ</td><td class="cell-data">KLMNOPQRST</td></tr>
        <tr><th class="fixed-col">C</th><td class="cell-data">UVWXYZ1234</td><td class="cell-data">567890ABCD</td></tr>
        <tr><th class="fixed-col">D</th><td class="cell-data">EFGHIJKLMN</td><td class="cell-data">OPQRSTUVWX</td></tr>
        <tr><th class="fixed-col">E</th><td class="cell-data">YZ1234567</td><td class="cell-data">890ABCDEFG</td></tr>
</table></div>

Answer №2

Give this a try: It could be helpful with some minor adjustments needed.

.fixed_headers {
  table-layout: fixed;
  border-collapse: collapse;
}
.fixed_headers th,
.fixed_headers td {
  max-width: 200px;
}
.fixed_headers th {
  text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
  padding: 5px;
  text-align: left;
}
.fixed_headers thead {
  background-color: #333;
  color: #FDFDFD;
}
.fixed_headers thead tr {
  display: block;
  position: relative;
}
.fixed_headers tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
  background-color: #DDD;
}
.old_ie_wrapper {
  height: 300px;
  width: 750px;
  overflow-x: hidden;
  overflow-y: auto;
}
.old_ie_wrapper tbody {
  height: auto;
}
<!--
Reference :https://codepen.io/tjvantoll/pen/JEKIu
-->
<table class="guide-table fixed_headers" bordercolorlight="#EEEEEE" bordercolordark="#EEEEEE" id="channels-table" width="2500px" bordercolor="#EEEEEE" border="10">
  <thead>
    <tr id="headerRow">
      <td id="date" class="">Mon, 9 Feb</td>
      <td>12:00 AM</td>
      <td>12:30 AM</td>
      <td>01:00 AM</td>
      <td>01:30 AM</td>
      <td>02:00 AM</td>
      <td>02:30 AM</td>
      <td>03:00 AM</td>
      <td>03:30 AM</td>
      <td>04:00 AM</td>
      <td>04:30 AM</td>
      // More time entries...
    </tr>

  </thead>
  <tbody>

    <tr>
      <td>EMPTY</td>
      <td>EMPTY</td>
      <td>EMPTY</td>
      <td>EMPTY</td>
      // More empty slots...
    </tr>
    <tr>
      <td>EMPTY</td>
      <td>EMPTY</td>
      <td>EMPTY</td>
      <td>Ranji Trophy Cricket: A semifinal (07:10)</td>
      // More schedule entries...
    </tr>
    <tr>
      <td>EMPTY</td>
      <td>EMPTY</td>
      <td>NDTV Hindi News Channel (05:00)</td>
      <td>EMPTY</td>
      // More channels and timings...
    </tr>
  </tbody>
</table>

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

Issue: unable to establish a connection to 127.0.0.1:465 to send an email

When attempting to send smtp alert messages from my site's email account <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="55363a3b2134362115383a3b263c21307b363">[email protected]</a> to the email addresses of m ...

After the checkbox is clicked, I must send a boolean value to the function through the input flag in AngularJS

<input class="bx--toggle" id="toggle-view" type="checkbox" ng-model="vm.monthView" ng-change="vm.getRelevantData()" ng-attr-data-modal-target="{{vm.alertForSaveAll ? '#add-save-all-alert-modal': 'undefined'}}"> Within this p ...

Developing a terminate button: the ins and outs of halting a request in Node/Express.js

I am in the process of building an app and need to include a "Cancel" button. This button is intended to cancel a request that includes a Promise.all method, which typically takes a few minutes to complete due to API rate limiting constraints on the other ...

Activate the search feature in select2 to allow multiple selections

I'm looking for a way to incorporate a search box into my multi-select fields using select2. Oddly enough, while the search boxes show up as expected in single-select fields, applying the same select2() function to a multi-select field doesn't s ...

Steps for generating an array from images within a div

<div id="w01"> <img src=g_bur/01.jpg alt='img'> <img src=g_bur/02.jpg alt='img'> <img src=g_bur/03.jpg alt='img'> </div> I would like to create an array of elements using the images above. JavaS ...

Use JSON to set the selected option value for the multi-select component

It's been nearly two days of searching for a solution to my problem, but I haven't found one yet. Perhaps I missed something as I'm new to learning Ajax and jQuery. Note: All my select boxes are Chosen Multiple select boxes with all options ...

How can I use jQuery to show an HTML dropdown menu populated from PHP?

Currently, I am working with a PHP backend that retrieves data from SQL. Specifically, it pulls a list of user ID numbers. I would like to showcase that list within an HTML select element using jQuery after a button is clicked. While contemplating how to ...

Uploading to a designated folder using Google Script

Looking to create a form for uploading files, photos, and videos to specific folders in Google Drive using Google Apps Script. However, encountering an error "invalid argument listener". Here is the HTML index: <!DOCTYPE html> <html> &l ...

Unable to employ Javascript while utilizing AJAX within jQuery Mobile

Exploring the potential of Swiper Javascript Api from within Jquery Mobile raises some challenges. The compatibility issues with Ajax in Jquery Mobile complicate the execution of Javascript functions. This becomes evident when examining example source cod ...

Using jQuery DataTable to fetch JSON data upon Document Loaded

I am struggling to implement a PHP script that returns JSON data to populate a DataTable. The PHP script 'api/exceptions_all.php' is as follows: <?php $select = "SELECT '', [FOR_PARTNER], [FOR_NAME] FROM [brokerage].[dbo].[for_ex ...

Exploring the world of Django static files, along with the magic of CSS and

Currently running on django 1.3 for production and encountering an issue with using static files in my CSS and JavaScript. Strangely, there are no problems in my HTML code! How can I resolve this dilemma? Unfortunately, the Django documentation does not pr ...

Modifying the values of array elements in MongoDB

I am currently attempting to modify specific elements within an array. This particular array consists of objects that have two distinct fields. The displayed output from my view is as follows: Each line in the display corresponds to the index of the objec ...

Combining a form and table on a single webpage, I am curious how to utilize the form to update the table effectively using Express and Node.js

Seeking guidance in website development as I face a particular challenge. I aim to create a dynamic search page for a website. The form should allow users to select a location or category, with the same page updating with relevant results. Despite succes ...

I want each <li> element to have a unique background image

I'm a beginner in HTML and I have created a simple webpage with a div called "navbar" containing a list ('ul') of buttons. Each button should have a different background image, which I created in Photoshop. I tried giving each 'li' ...

Pass the responsibility to another component or initiate an ajax request in react

I'm currently using fetch for my ajax call, which is located within a handleSearch function in the App component. How can I separate this ajax call into its own component? Coming from Angular 1, where services/factories are used, I'm not sure how ...

Developing a collection of customized shapes comprised of circular-edged rectangles using the Three.JS

I have been on a quest for some time now. My aim is to replicate this visual element from - the beautifully arranged deck of cards. I know it was created using Three.JS, and my goal is to recreate it exactly as seen in that link. The challenge I'm c ...

The information is not being shown. Error: API expression GET is not possible

import express from 'express'; import data from './data'; const app = express(); app.get("/api/products", (req, res) => { res.send(data.products); }); app.listen(5500, () => {console.log("The server has been successfully s ...

Utilizing JQuery AJAX for Effortless Caching with PHP Endpoints

I am currently working on improving the speed of the ajax requests on my website. The site operates using live filtering, so when a user interacts with a form element, the data will adjust accordingly. While the functionality works well, I find that it&apo ...

Creating a color icon for StackExchange using HTML

I am currently working on building my personal website. I am looking to include a link to my Stack Exchange profile on my site using the Stack Exchange icon. However, the icons available in Font Awesome are grayscale and not colored like other icons such a ...

modify the appearance of HTML controls in real time with C#

Is there a way to dynamically add an additional navigation item to my website's menu list when the admin logs in through admin.aspx? The menu list is created using HTML controls such as <ul>...<li>, and I would like the new navigation item ...