Navigating a table while keeping headers in place at the top

Trying to construct a table where the thead remains fixed while the tbody scrolls. Utilizing percentages and fixed width for cell size determination, aiming for uniformity and alignment between percentage td's and thead headers.

Referenced JSFiddle documenting the issue: JSFiddle

.main-wrapper {
  overflow-y: scroll;
  height: 300px;
  border: 1px solid blue;
}

.content-wrapper {
  height: 500px;
}

.table {
  width: 100%;
  table-layout: fixed;
}

.table.content {
  margin-bottom: 15px;
}

.header {
  position: fixed;
}

.cell {
  border: 1px solid red;
  width: 100%;
  height: 15px;
}

.medium {
  width: 100px;
}

.small {
  width: 50px;
}
<div class="main-wrapper">
  <div class="content-wrapper">
    <table class="table header">
      <thead>
        <tr>
          <th class="cell medium">A</th>
          <th class="cell small">B</th>
          <th class="cell">C</th>
          <th class="cell">D</th>
          <th class="cell">E</th>
          <th class="cell">F</th>
          <th class="cell">G</th>
          <th class="cell">H</th>
          <th class="cell">I</th>
          <th class="cell small">J</th>
        </tr>
      </thead>
    </table>
    <table class="table content">
      <tbody>
        <tr>
          <td class="cell medium">A</td>
          <td class="cell small">B</td>
          <td class="cell">C</td>
          <td class="cell">D</td>
          <td class="cell">E</td>
          <td class="cell">F</td>
          <td class="cell">G</td>
          <td class="cell">H</td>
          <td class="cell">I</td>
          <td class="cell small">J</td>
        </tr>
        <tr>
          <td class="cell medium">A</td>
          <td class="cell small">B</td>
          <td class="cell">C</td>
          <td class="cell">D</td>
          <td class="cell">E</td>
          <td class="cell">F</td>
          <td class="cell">G</td>
          <td class="cell">H</td>
          <td class="cell">I</td>
          <td class="cell small">J</td>
        </tr>
        <tr>
          <td class="cell medium">A</td>
          <td class="cell small">B</td>
          <td class="cell">C</td>
          <td class="cell">D</td>
          <td class="cell">E</td>
          <td class="cell">F</td>
          <td class="cell">G</td>
          <td class="cell">H</td>
          <td class="cell">I</td>
          <td class="cell small">J</td>
        </tr>
        <tr>
          <td class="cell medium">A</td>
          <td class="cell small">B</td>
          <td class="cell">C</td>
          <td class="cell">D</td>
          <td class="cell">E</td>
          <td class="cell">F</td>
          <td class="cell">G</td>
          <td class="cell">H</td>
          <td class="cell">I</td>
          <td class="cell small">J</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

If the position: fixed is removed, the display aligns correctly but the thread does not stay at the top.

javascripthtmlcss

Answer №1

I believe achieving this effect solely through CSS is not possible.

I have attempted to do so in the past and after extensive research, I was unable to find a solution.

In my opinion, the best approach would involve using JavaScript and Divs instead of tables.

Fortunately, there are plugins available that can help us accomplish this, such as fixedheadertable

Answer №2

In the event that you opt not to utilize a <thead> tag within your table, an alternative approach would be to implement the position:sticky property. This will enable you to preserve the width of your cells without removing the header cells from the html flow (by using fixed positioning).

You can achieve this by following the code snippet provided below:

.main-wrapper {
  overflow-y: scroll;
  height: 300px;
  border: 1px solid blue;
}

.content-wrapper {
  height: 500px;
}

.table {
  width: 100%;
  table-layout: fixed;
}

.table.content {
  margin-bottom: 15px;
}

th{
  position: sticky;
  top:0px;
}

.cell {
  border: 1px solid red;
  width: 100%;
  height: 15px;
}

.medium {
  width: 100px;
}

.small { 
  width: 50px;
}
<div class="main-wrapper">
  <div class="content-wrapper">
    <table class="table header">       
      <tbody>
        <tr>
          <th class="cell medium">A</th>
          <th class="cell small">B</th>
          <th class="cell">C</th>
          <th class="cell">D</th>
          <th class="cell">E</th>
          <th class="cell">F</th>
          <th class="cell">G</th>
          <th class="cell">H</th>
          <th class="cell">I</th>
          <th class="cell small">J</th>
        </tr>
        <tr>
          <td class="cell medium">A</td>
          <td class="cell small">B</td>
          <td class="cell">C</td>
          <td class="cell">D</td>
          <td class="cell">E</td>
          <td class="cell">F</td>
          <td class="cell">G</td>
          <td class="cell">H</td>
          <td class="cell">I</td>
          <td class="cell small">J</td>
        </tr>
        <tr>
          <td class="cell medium">A</td>
          <td class="cell small">B</td>
          <td class="cell">C</td>
          <td class="cell">D</td>
          <td class="cell">E</td>
          <td class="cell">F</td>
          <td class="cell">G</td>
          <td class="cell">H</td>
          <td class="cell">I</td>
          <td class="cell small">J</td>
        </tr>
        <tr>
          <td class="cell medium">A</td>
          <td class="cell small">B</td>
          <td class="cell">C</td>
          <td class="cell">D</td>
          <td class="cell">E</td>
          <td class="cell">F</td>
          <td class="cell">G</td>
          <td class="cell">H</td>
          <td class="cell">I</td>
          <td class="cell small">J</td>
        </tr>
        <tr>
          <td class="cell medium">A</td>
          <td class="cell small">B</td>
          <td class="cell">C</td>
          <td class="cell">D</td>
          <td class="cell">E</td>
          <td class="cell">F</td>
          <td class="cell">G</td>
          <td class="cell">H</td>
          <td class="cell">I</td>
          <td class="cell small">J</td>
        </tr>
      </tbody>
    </table>
  </div>
</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

Experiencing difficulties connecting JavaScript with HTML

I'm encountering difficulty with implementing my JavaScript on my website. While it functions properly in this JS Fiddle, I am experiencing issues when trying to use it on my actual site. Below is how I have linked the JS on my site: <head> < ...

javascriptjqueryhtml

Looking to eliminate the vertical spacing of the <hr> tag?

Summary: For a quick solution, just click on the image at the bottom. Greetings to everyone! I am facing an issue with two <div> elements that I need to separate using a <hr class="separator"> element. Below is the CSS code for the ...

htmlcssmarginvertical-alignmentspacing

Continuously make Ajax requests to populate numerous div elements

There are two div elements present on my webpage. <div id="1"></div> <div id="2"></div> I am attempting to dynamically populate these divs using the following php call. <script> var queries = ["SELECT * from table1", "S ...

javascriptphpjqueryhtmlajax

Creating HTML within a Servlet by incorporating additional quotation marks

Currently, I'm attempting to construct some HTML markup within a Spring controller. Here is a snippet of the code: append(sb ,"<div class=&quot;myDiv&quot;>"); This code snippet ends up generating the following HTML source in the brows ...

javahtmlspringjsp

Pairing strings with arrays

I'm trying to compare elements in two arrays and see if there are any matches. However, I can't seem to get it working correctly. let name; let list = ["Kat", "Jane", "Jack"]; // sample array let input = ["Hey", "i'm", "Jack"]; if (input.fo ...

javascriptnode.jsregexmatch

Emphasizing the chosen element in a list using angular

After retrieving an array of items from the database, my list is constantly changing, causing the HTML display to update dynamically. However, I am struggling with highlighting only the selected item in the list, as the entire list gets highlighted upon se ...

htmlangularlist

Javascript error when attempting to add leading zeros

Is there a way to utilize JavaScript or JQuery in order to prepend a zero to this script? for (im=1;im<=31;im++){ days[im]=everyDay[im]; } ...

javascriptjquerypadding

Steps for removing the label associated with an input field in an HTML form

I attempted to use JQuery and JavaScript in order to modify the CSS of a label to make it greyed out, but unfortunately I have not been able to achieve this. The label is positioned next to a checkbox, and although I am able to disable the checkbox, I hav ...

javascriptjqueryhtmlcss

When conducting tests using Selenium and the headless Google Chrome browser in Java, the dynamic JS content fails to load

Currently, I am in the process of testing a website that I have developed as part of a Spring Boot project using Selenium. While I can successfully test basic functionalities such as page loading and title verification, I am encountering difficulties when ...

javascriptjavagoogle-chromeselenium-webdrivergoogle-chrome-headless

Looking for assistance with reviewing and optimizing Angular UI-Router implementation

I'm currently facing an issue with setting up routing for my angular portfolio. Despite checking my code against a previous app, I am unable to identify the error as there are no console logs when I compile. Can someone please review my code layout an ...

javascriptangularjsangular-ui-router

Obtain JSON data using jQuery

Hey there! I am currently working on understanding how to retrieve data using json/JQuery with the code below. After storing a php variable in a json variable (var ar), I confirmed its contents through console.log, although when I used document.write it d ...

javascriptphpjqueryjson

What are the reasons behind the inability to import an image file in Next.js?

Having an issue with importing image file in Next.js I'm not sure why I can't import the image file... The image file is located at 'image/images.jpg' In Chrome browser, there are no error messages related to the image, However, in ...

javascriptreactjsimportnext.jsnext-images

Retrieving information in Ionic

Having trouble fetching data from a server in my first ionic application. I keep getting an error that says "Cannot read Property" while trying to attach my code snippet. Here is what my code looks like: import { Component } from '@angular/core' ...

javascriptphpjsonionic-framework

Using Javascript to open a new page and execute a script

I need to be able to launch a new window window.open(url,'_blank'); After that, I want to execute a JavaScript script like this: window.open(url,'_blank').ready("javascript code here"); However, I'm unsure how to accomplish thi ...

javascripthtml

What is the best way to partition JSON data from an API request in React and display it in various sections within the component

There are 2 JSON objects that contain sales period details based on Month to date and year to date. The data includes information such as Units Sold, Gross Revenue, Year to Date Totals, Month to Date Averages, Expenses, Net Revenues, and Per Unit values. I ...

javascriptreactjsjsxsemantic-ui-react

Choosing nested elements using CSS

Looking to target a specific element within a shared class, I'm struggling to find the right method to pinpoint the exact entry of this element. What I need to do is hide the current photo (pic2.jpg) and replace it with another image (pic3.jpg) in the ...

htmlcss

Issue with SwiperJS not completely filling the height of a div

My issue relates to using swiperJS with multiple images, as I'm struggling to make it take the full width and height of the containing div. Despite applying styling like this to my images: .swiper-slide img { width: 100%; height: 1 ...

javascriptcssswiper.js

The conditional rendering issue in Mui DataGrid's renderCell function is causing problems

My Mui DataGrid setup is simple, but I'm encountering an issue with the renderCell function not rendering elements conditionally. The default behavior should display an EditIcon button (the pencil). When clicked, it triggers the fetchSomething functi ...

javascriptreactjsmaterial-uimui-x-data-grid

React-Troubleshooting list items and keys: A comprehensive guide to resolving common issues

I'm facing a challenge with generating unique key ID's for my list items. Even though I thought I had a good understanding of how unique keys function, it seems that I am mistaken. In the code snippet below, using key={index} or key={item} is no ...

javascriptreactjsmaterial-ui

Customizing Thickness for Tab Labels in MUI 5

I have been trying to adjust the thickness of the label inside a tab using MUI 5, but so far I haven't had success. Here is what I have attempted: interface TabPanelProps { children?: React.ReactNode; index: number; value: number; } funct ...

cssreactjsmaterial-ui