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

What other options are available besides componentDidUpdate for retrieving the chosen date from a date picker and including it in an API request?

Currently, I am utilizing react-dates to implement a datepicker feature. Whenever the user modifies the date, it updates a prop that is then sent to the backend as a parameter in a query to fetch specific results for that particular day from the database. ...

javascriptreactjsapireact-dates

Determine the type of element existing in the table cell

Currently, I am utilizing protractor to iterate through table cells in an attempt to verify the presence of a checked checkbox. var elements = element.all(by.css(columncssname)); elements.each(function (cell, index) { <--need to confirm if check ...

javascriptangularjsseleniumjasmineprotractor

Developing Authorization in AngularJS

Incorporating authorization into an AngularJS project is crucial. In my current project, which revolves around a social media concept, users with different roles may have varied access to view files. For instance, envision two distinct roles: customer and ...

javascriptangularjsangularjs-directiveangularjs-scopeauthorization

The issue arises when trying to access the value that is not defined in the combination of angularjs $

I am currently working on retrieving the Balance value of an ethereum account using the web3 API. My goal is to extract this value and store it in the $scope so that I can access it in my HTML. However, I seem to be encountering an issue where I consistent ...

javascriptangularjsethereum

Optimizing Angular.js templates for faster loading using Node.js pre-compilation

As I delve into learning Angular and integrating it with my current Node.js framework, I find myself facing some challenges. Previously, I utilized Handlebars.js as my templating engine in Node.js, where I would build the context on the server side and the ...

javascriptangularjsnode.jstemplates

Database query is failing to return any results

Currently, I am developing a URL shortener system which involves storing data in my database such as an id, url, code, and created. However, I encountered an issue where the code does not return the required code despite checking if the entered url exists. ...

phphtmlmysql

Is there a way to include an instance variable as a CSS rule in Rails?

Assume I have the following ActiveRecord class: ......... store :skin_properties, accessors: [ :background_color, :font_size, :font_family, :color ] ......... This class saves values in the format shown below: {"background_color"=> ...

cssruby-on-railsruby

Leveraging data from various Fetch API calls to access a range of

As a beginner with Fetch API and Promises, I have encountered an issue that I hope someone can help me with. My code involves fetching event data with a token, extracting team ids, and using these ids to fetch more information from another endpoint. Every ...

javascriptjsonpromisefetch-api

In the MUI v5 framework, when using nested modals, both the parent and child modal instances will close simultaneously

Here is the reproduction of my issue on codesandbox: https://codesandbox.io/s/trusting-babbage-ovj2we?file=/src/App.js A nested modal has been created where the parent modal opens a button leading to the child modal. The useState of the parent modal has b ...

javascriptreactjsmaterial-uifrontenduse-state

Scrolling to the active list item in the navigation bar

Having an unordered list with the id mainul in the navigation bar is causing a problem when the page reloads. The navigation bar always starts at the beginning, but I would like it to automatically scroll to the active li element. This is my HTML code: & ...

javascriptjqueryhtml

Issue with Jquery .on() causing toggleClass function to not trigger

Adding a column dynamically to a table on click with JS/Jquery is achieved as demonstrated below $("#btn").click(function(){ $('#week_title').append('<th>Week '+count+'</th>'); count++; $('.tag&ap ...

javascriptjqueryhtml

How to change a time in HH:mm format to a Date object using JavaScript

I am facing a challenge with converting two time strings to Date objects and subtracting their values. The times I have are: 14:10 and 19:02 To perform the subtraction, I attempted to parse them using the following code: var res = date1 - date2; Howev ...

javascriptjquery

Setting up jsdoc on a computer with slow internet access can be a bit tricky, but with

Recently, I have been working on some JavaScript code and utilized the sublime jsdoc plugin for commenting. Now, my goal is to generate documentation from these comments. The challenge lies in the fact that I am developing this JavaScript on a machine loca ...

javascriptnode.jsnpmofflinejsdoc

I'm facing an issue with my 'root' div on ReactJS - it doesn't stretch all the way to the top. Any suggestions on how I can make it expand properly

While I realize this issue has been discussed extensively, none of the suggested solutions have worked for me. As a final attempt to resolve it, I am turning to you all here. The point at which my root div stops is puzzling: I've explicitly defined ...

htmlcssreactjsroot

Using HTML and C# to Deliver Emails

I've encountered a challenge with my HTML page that includes a textbox for users to input their email. When the submit button is clicked, an email should be sent to a specific email address defined in the code, and a pop-up box indicating "Email Sent" ...

c#javascripthtmlemail

Is there a way to retrieve a child's parents within an array.filter() callback function even if they were initially filtered out?

Today I stumbled upon the array.filter() method and its accompanying callback function. I have a collection of objects structured like this: var treeAry = [ {"id" : "200", "parent": "#", "type" : "1"}, {"id" : "300", "parent": "#", "type" : " ...

javascriptjqueryarrays

Tips for creating AngularJS forms which display radio buttons and populate data from a JSON file

I'm having trouble displaying the json data correctly. How can I show the radio buttons from my json file (plunker demo)? Additionally, I want to validate the form when it is submitted. Here is the HTML code: <my-form ng-app="CreateApp" ng- ...

javascriptangularjsjson

Incorporating an else statement into a function that handles AJAX calls upon receiving a response

My code is almost perfect, but there's just one issue. Whenever an invalid email is entered, the else statement in the PHP response makes it look like the form was still successful. How can I modify my current code to display the appropriate error mes ...

javascriptphpajax

Locating the xpath of an element directly beneath the opening <body> tag

I'm having trouble finding the xpath for an element that is not associated with any html tags. Please see the attached image for reference. I tried using driver.findElement(By.xpath("/html/body/"));, but it's not working. I need to locate the tex ...

htmlseleniumxpath

Angular 2's Conditional Validation: A Comprehensive Guide

Angular 2 offers straightforward validation, which is a great feature. However, the challenge lies in making a required field optional based on another field's selection. Below are the validation rules: this.contractsFilter = this.fb.group({ selec ...

javascriptangularvalidation