The frozen first column in a CSS table does not have consistent height with the rest of the row

Having trouble with freezing the first column of a table and aligning the height of the first cell with the rest of the row? Check out the issue in the image below: https://i.sstatic.net/v5xHU.png

For a live example, you can also visit this jsfiddle link

.headcol {
    position: absolute;
    width: 5em;
    left: 0;
    top: auto;
    border-top-width: 1px;
    /*only relevant for first row*/
    margin-top: -1px;
    /*compensate for top border*/
    background: white;
    border-right: 4px solid black;

}

Answer №1

The issue arose due to the disparity in height between the column and the fixed rowhead.

When using HTML elements with a position-absolut, only the innerHTML's height is considered.

To address this, I added a min-height to both your columns and headers, along with a min-width for better styling outcomes. You have the option to modify it within the JSFiddle provided here.

.grades-table {
  overflow-x:scroll;
  overflow-y:visible;
  margin-left: 5em;
}

.grades-header,
.grades-column {
  min-width: 150px;
  min-height: 38px;
  text-align: center;
}

.headcol {
  position: absolute;
  width: 5em;
  min-height: 38px;
  left: 0;
  top: auto;
  border-top-width: 1px;
  margin-top: -1px;
  background: white;
  border-right: 4px solid black;
}

.headcol-text {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
<div class="grades-table">
<table>
  <thead>
    <tr>
      <th class="headcol">students</th>
      <th class="grades-header">01_getting_started</th>
      <th class="grades-header">02_courses</th>
      <th class="grades-header">03_tasks</th>
      <th class="grades-header">04_run_student</th>
      <th class="grades-header">05_fetching_input</th>
      <th class="grades-header">06_feedback</th>
      <th class="grades-header">07_advance_feedback</th>
      <th class="grades-header">08_archive</th>
      <th class="grades-header">09_ssh_debug</th>
      <th class="grades-header">10_environments</th>
    </tr>
  </thead>
  <tbody>
    <tr class="grades-row">
      <th class="headcol">
        <div class="headcol-text">
          student1
        </div>
      </th>
      <td class="grades-column"><a href="#">01</a><br><a href="#">X days ago</a></td>
      <td class="grades-column"><a href="#">02</a><br><a href="#">X days ago</a></td>
      <td class="grades-column"><a href="#">03</a><br><a href="#">X days ago</a></td>
      <td class="grades-column"><a href="#">04</a><br><a href="#">X days ago</a></td>
      <td class="grades-column"><a href="#">05</a><br><a href="#">X days ago</a></td>
      <td class="grades-column"><a href="#">06</a><br><a href="#">X days ago</a></td>
      <td class="grades-column"><a href="#">07</a><br><a href="#">X days ago</a></td>
      <td class="grades-column"><a href="#">08</a><br><a href="#">X days ago</a></td>
      <td class="grades-column"><a href="#">09</a><br><a href="#">X days ago</a></td>
      <td class="grades-column"><a href="#">10</a><br><a href="#" href="#">X days ago</a></td>
    </tr>
  </tbody>
</table>
</div>

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

After clicking on a specific href element with a designated class, trigger the display of a custom dialog styled using CSS

I recently added a unique class to certain links on my website. When these specific links are clicked, I want them to trigger a customized dialog box. My goal is to modify the CSS of this special dialog box. Only links with this particular class should ...

The dropdown list is nowhere to be found in the page source when using Selenium

Currently, I am engaged in web scraping using Selenium. Successfully locating the input box and entering ID numbers is no issue. Yet, a roadblock presents itself - there is no submit button linked to the search bar. Once the numbers are inputted, the box a ...

Modify the CSS formatting of a specific element with its designated ID

On my HTML page, I have an element that looks like this: <label id="lb">Label1</label> In my corresponding CSS file, I have defined the following style for it: #lb{ width:100px; } I want to override this style. What would be the most effect ...

"A lengthy contenteditable div designed to mimic an input field, with the ability to horizontally scroll

When the input is too short for the entire text to be displayed, users have the option to horizontally scroll the text inside the input by dragging with the mouse. Is there a way to implement this functionality in a contenteditable field that appears as ...

Discovering elements with Selenium

While using selenium, I stumbled upon this web element: <td style="padding-right: 10px; " **onclick="javascript:show_me('CarDetails.php?CarID=2358912&SubCatID=1**', '2358912', 560, 'ActiveLinkVisited');stat( '../& ...

Using a background image in the navigation menu with CSS

Looking to create a horizontal menu with a responsive background image. Struggling with the issue of the 'ul' menu being misaligned with the background image when in full-screen mode. Attempted to use separate 'div' containers for the ...

The input box within the form is insufficiently sized

My task is to generate textareas with custom parameters like "cols" and "rows" and display them in forms. However, these parameters seem not to be functioning as expected. Whether I set cols=1000 or cols=1, there is no difference in the output. After revie ...

What is the best way to use jQuery to update the color of an SVG shape?

Hello everyone! I'm excited to be a part of this community and looking forward to contributing in the future. But first, I could really use some assistance with what seems like a simple task! My focus has always been on web design, particularly HTML ...

Using jQuery to create a checkbox that functions like a radio button

In my code, I have a bunch of checkbox elements placed in different containers as demonstrated below: $("input:checkbox").click(function() { var url = "http://example.com/results?&" var flag = false; var $box = $(this); var $facet = $box.val ...

disable border-collapse styling in ASP.NET DataList

Currently, I am new to the world of ASP.NET and I am facing a challenge in styling a DataList. Lately, I have developed a fondness for rounded corners on borders, and I am attempting to incorporate this effect into all my pages by implementing it across al ...

Is it possible to retrieve the complete file path in a form?

My goal is to retrieve a file using an input element of type "file". This element is located within a partial view, and I need to send it to the controller or request it there using "Request.Form["inputFile"];". However, this method only provides me with t ...

stop cascading style sheets from being overwritten

In my ASP.NET web forms project, I am utilizing Telerik controls. The Problem In one instance, I need to retrieve HTML data from the database, which includes a lot of CSS, images, and HTML content. Here is an excerpt of my code: <telerik:RadLabel ...

The switch statement remains unchanged for varying variables

Here is some code that I am working with: updateTable(selectedIndex) { console.log("running updateTable function"); let level = ''; // if (selectedIndex == 1){ // this.setState({level: 'day'}) // th ...

Shifting divs to different positions upon clicking

I am currently working on a project where I have three divs in a container positioned next to each other. My goal is to make them change their positions when clicked. For example, clicking on the left div should move it to the center position. Here is my p ...

What is the best way to position a title at the bottom center of each image within my grid gallery?

I'm struggling to find a way to position a title at the bottom of each image in my grid gallery, right in the center of the photo with a light-gray background. I want the text to be fully visible regardless of the image used. Currently, I can only put ...

Navigating through pages: How can I retrieve the current page value for implementing next and previous functions in Angular 7?

Greetings, I am a new learner of Angular and currently working on custom pagination. However, I am facing difficulty in finding the current page for implementing the next and previous functions. Can anyone guide me on how to obtain the current page value? ...

What is the best way to include special characters such as brackets [ ], single quotes ', and double quotes " in a MySQL database?

When I try to insert special characters using PHPmyAdmin, it works fine. But when I insert them via PHP, they don't seem to work correctly. Is PHP changing the special characters into something else? If that's the case, is there a way to ensure t ...

Utilizing and incorporating distinct html elements on a separate webpage

I am in the process of developing a dynamic newspaper-style website where articles will be regularly updated and replaced on the Home Page. Each article featured on the Home Page will serve as a link to a separate page for full details. These article links ...

What is the best way to implement a dropdown in MUI and React that displays functional components as items?

Here is a list of dummy components: const OwnerList = () => { return ( <Box sx={{ display: 'flex', }} className="owner-container" > <Avatar src='https://hips.hearstapps.com/hmg- ...

What steps should I take to transition from a table-based layout to a more semantic HTML structure with a CSS-based layout?

Looking at the image presented, a significant portion of the HTML code has been structured semantically, with CSS being utilized for overall aesthetics. However, despite concerted efforts, resorting to a table was necessary to ensure that the segment on th ...