Fixed-positioned left column in a styled table

Struggling to implement the solution provided in this popular topic on Stack Overflow about creating an HTML table with a fixed left column and scrollable body. The issue arises from my use of the thead and tbody tags, which are not addressed in the examples.

The table structure includes days of the month in the thead section and names of employees in the tbody.

<table>
  <thead>
    <tr>
      <th></th>
      <th>01 July</th>
      <th>02 July</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Employee 1</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Employee 2</td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

The goal is to fix the td cells containing employee names while enabling horizontal scrolling.

Check out the example on JSFiddle

htmlcss

Answer №1

If you want to achieve this effect with the given markup in your question, utilizing position:fixed is the key.

table {
position: relative;
left: -10px;
}

thead tr th:nth-of-type(1),
tbody tr td:nth-of-type(1) {
display: block;
position: fixed;
z-index: 6;
width: 100px;
height: 20px;
background-color: rgb(255,255,255);
}

th, td:nth-of-type(n+2) {
min-width: 80px;
text-align:center;
}

th:nth-of-type(2),
td:nth-of-type(2) {
padding-left: 104px;
}
<table class="table table-hover">
  <thead>
    <tr>
      <th></th>
      <th>01 July</th>
      <th>02 July</th>
      <th>03 July</th>
      <th>04 July</th>
      <th>05 July</th>
      <th>06 July</th>
      <th>07 July</th>
      <th>08 July</th>
      <th>09 July</th>
      <th>10 July</th>
      <th>11 July</th>
      <th>12 July</th>
      <th>13 July</th>
      <th>14 July</th>
      <th>15 July</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Employee 1</td>
      <td></td>
      <td></td>
      <td></td>
      <td>Vacation</td>
      <td>Vacation</td>
      <td>Vacation</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Employee 2</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>Vacation</td>
      <td>Vacation</td>
      <td>Vacation</td>
    </tr>
  </tbody>
</table>

Answer №2

Please review the code below.

th, td {
white-space: nowrap; border:1px solid #ccc; padding:5px 0;
}

.first-col {
  position: absolute;
width: 5.6em;
margin-left: -5.7em; background:#ffffff;
}

.table-wrapper {
    overflow-x: scroll;
width: 430px;
margin: 0 0 0 5.3em;
}
<div class="container">
    <div class="table-wrapper">
        <table class="table table-bordered table-striped table-hover" cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th class="first-col">&nbsp;</th>
                    <th>Table heading1</th>
                    <th>Table heading</th>
                    <th>Table heading</th>
                    <th>Table heading</th>
                    <th>Table heading</th>
                    <th>Table heading</th>
                    <th>Table heading</th>
                    <th>Table heading</th>
                    <th>Table heading</th>
                    <th>Table heading</th>
                    <th>Table heading</th>
                    <th>Table heading</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="first-col">Employee1</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                </tr>
                <tr>
                    <td class="first-col">Employee2</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Is this what you are looking for?

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

When swiping right with Swiper.js, the slides are jumping by all, skipping the following slide, but the left swipe functions correctly

Here is the code I used for my swiper element: new Swiper("#swiper-pricing", { slidesPerView: 1.3, spaceBetween: 30, centeredSlides: true, loop: true, keyboard: { enabled: true, }, autoplay: { delay: 50 ...

javascripthtmlcssbootstrap-5swiper.js

Having trouble incorporating a JavaScript snippet from Google Trends into an HTML webpage

Hey everyone, I've been trying to incorporate a JavaScript script to display Google Trends on an HTML page. I copied the embed code directly from the first image at and modified it as follows. Unfortunately, it's not working as expected. <ht ...

javascripthtml

Retrieve the text input from the text field and display it as

Is there a way to display what users enter in a textfield when their accounts are not "Activated"? Here's an example: if(active == NULL);{ //I've attempted the following methods. //In this scenario, 'username' is the name of ...

javascriptphphtml

I am adding the main stylesheet to the queue, but for some reason my images are not appearing

I'm in the process of converting HTML to a Wordpress theme. I've successfully enqueued the stylesheet, but unfortunately, some of the images are not displaying properly. It seems like it could be an issue with the subfolder structure. ...

htmlwordpresssubdirectoryenqueue

Eliminate any undefined data in the popup map of Javascript

I am working with JSON data that is being displayed in a pop-up on a map. In cases where there is missing data (Visibility), the word undefined appears in the pop-up. Is there a way to remove the undefined text so that it does not show up in the pop-up? ...

javascripthtmlcssjson

CSS file selector for Reactstrap component

What is my goal? I noticed a gap between my jumbotron and footer that I want to remove. Initially, I was able to achieve this by setting the margin-bottom to 0px, but it required passing an ID to the Jumbotron element. Now, my objective is to accomplish t ...

cssreactstrap

CSS styling doesn't take effect until the page is reloaded due to the failure of cssText

After generating a new list item, it appears that the CSS styling is not being inherited until the page is reloaded. Even though I have added styling using cssText dynamically, it doesn't seem to be working as expected. I've attempted using cssT ...

javascriptcss

What causes the transformation from "&" to "&amp;" upon the completion of page loading?

While using Firefox and working on a page, I noticed that & turns into &amp;. Normally, I would fix this with html_entity_decode(), but it's not working in this case. Then I stumbled upon something interesting. An alert is triggered once the ...

htmlknockout.jsspecial-characters

Using Flexbox to center items is leading to content overlapping

After attempting to utilize flexbox for centering items, I am encountering issues with content overlapping and misalignment. Link to the code snippet .footer_3 { position: relative; display: flex; align-items: top; justify-content: center; top: ...

cssflexbox

How can you eliminate a specific element from an HTML document?

Utilizing localStorage can be tricky when it comes to keeping the JSON file hidden from being displayed on the HTML page. One approach I used involves sending the JSON file to the client once and then performing all logic using that file. To prevent the JS ...

javascriptjsonhtmllocal-storage

Animation in CSS Appears Jumpy in Chrome

For some reason, the text inside a moving div (which is transitioning using CSS) seems to jitter and shake in Chrome. However, this issue does not occur in Firefox, where the movement is very smooth and achieves the desired effect. #hidexpert { display: b ...

cssgoogle-chrome

Optimal method for streaming and viewing an mkv video captured with ffmpeg in a web browser

Is there a way to stream a video recorded with ffmpeg in a web browser using the HTML5 video tag? I currently have this code on my page, with the URL pointing to a video file (example.mkv) being recorded by ffmpeg. <video class="video-player" controls ...

htmlffmpegvideo-streaminghtml5-video

Despite having a hover animation, the CSS animation remains stuck

I'm looking to create a hover animation where one picture disappears upon hovering and is replaced by another picture, but I'm having trouble getting the back picture to disappear My attempt involved changing opacity from 1 to 0 with a transitio ...

htmlcss

Identifying browser compatibility for date input type with Angular 2 and above

Is there a reliable method to check if the browser supports <input type="date"> in Angular2+? I came across a suggestion on https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date where they recommend creating the input element and chec ...

htmlangularbrowser-detection

Encountering an error message stating that the "@font-face declaration does not adhere to the fontspring bulletproof syntax" while attempting to integrate a custom font

I've been struggling to incorporate a unique font into my website, but I keep encountering the same error every time. Despite my efforts, I haven't found much guidance on how to rectify this issue. Below is the code I'm using: @font-face ...

htmlcss

Utilize Vue.js and express.js to distribute HTML files securely

Currently, my tech stack includes Vue.js for the frontend and Express.js for the backend. When I kick off the express.js server using npm start, my goal is to serve the Vue frontend component. By utilizing the Vue generator and Express generator, I attemp ...

javascripthtmlnode.jsexpressvue.js

Using Dynamic Jinja HTML to Select Elements Dynamically

I have a unique system where forms are dynamically created based on values from a dictionary. Each form is assigned an ID corresponding to the key value and initially hidden. <div id="subforms" style="display: none" > {%for k, v in options.items() ...

javascriptpythonhtmljinja2

Guidelines on transforming XML files into HTML tables using C++ programming language

Is there a C++ library available that can help me convert an XML file into an HTML table using my C++ application? For example: <breakfast_menu> <food> <name>Belgian Waffles</name> <price>$5.95</price> <d ...

htmlc++xmlc++11

Is optgroup malfunctioning in IE 10?

My main question is: does optgroup not function properly in IE? The Plnkr code works fine in Chrome but encounters issues in IE 10. I'm trying to find a solution that will work across both browsers. Is this a known problem? In Chrome, I can expand/co ...

javascriptjquerycssangularjsinternet-explorer

Tips for creating a hover effect on an icon within a CSS grid

I've just started learning to code and wanted to create a component for previewing/displaying a project I'm working on. I've been attempting to add a hover effect to my links such as the GitHubIcon and LaunchIcon, but so far, it's not w ...

javascripthtmlcssreactjsnext.js