Fixed header and scrollable table with both horizontal and vertical movement

My calendar has a list of users on the left side and dates with cells on the right side. I need to ensure that the dates stay fixed at the top when scrolling to the bottom of the page. However, this is proving tricky because my main table containing the dates has overflow:scroll set for scrolling purposes while also needing to keep the left-side users fixed.

How can I achieve fixing the <thead> element with dates at the top even with nested tables and overflow:scroll? One possible solution could be to split the table into two separate tables for thead and tbody sections and then catch the scroll event to synchronize them. Would this approach work?

Check out the JSFiddle demonstration here - https://jsfiddle.net/p69j0L5h/2/

P.S. In reality, all cells have equal dimensions (width and height). This example is just a simplified version for illustration purposes.

javascripthtmlangularjscss

Answer №1

While it is true that your proposal could work, there may be a better way to approach it. The current markup is overly complex and the tabular data is not being structured in the most effective manner.

Implementing bi-axial sticky/frozen headers is completely feasible and can be achieved with ease.

For more information, please consult the following link: http://tympanus.net/Tutorials/StickyTableHeaders/index3.html

Answer №2

Simply implement the following CSS code snippet for desired effects: 

//keep the table header fixed
thead {
 position: fixed;
}

//set td width to 100px
td {
 width: 100px;  
}

//move scroll bar from bottom to top
table {
 height: 200px; /*consider using 100% as well*/
}

Answer №3

By adjusting the layout of your html, I was able to accomplish what you desired! Though I'm uncertain if this is the most appropriate method.

The revised html would appear as follows:

<div ng-controller="MainCtrl" class="container main">
  <table class="table table-bordered">
    <thead>
      <tr class="fixed">
      <th>blank space</th>
        <th ng-repeat="date in dates">
          {{date}}
        </th>
      </tr>
    </thead>

  </table>
  <table  class="table table-bordered" style="margin-top:50px">
     <tbody style="margin-top:30px">
      <tr ng-repeat="user in users">
        <td>{{user}}</td>
        <td  ng-repeat="date in dates"></td>
      </tr>
    </tbody>
  </table>
</div>

I've also put together a fiddle demonstrating the changes: https://jsfiddle.net/gpa5v9L7/

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

I'm curious if it's possible to utilize Raspberry Pi GPIO pins within a JavaScript frontend

Is it possible to utilize Raspberry Pi's GPIO pins in Javascript? Specifically, I am interested in reading the values of the Raspberry Pi PIR sensor without having separate Python and Javascript applications. Ideally, I would like a solution that inte ...

javascriptnext.jsraspberry-pigpio

Tips for utilizing a JQuery Selector for locating a DOM Element with one of its several classes

At the bottom of this text, you'll find my specific question. First, let me provide some context. I have a JQuery function written in TS: startEventListeners = () => { $(document).ready(() => { $('.dropdown-submenu ...

javascriptjqueryhtmlangularjs

Encountering an error message stating "Unable to read property 'map' of undefined while attempting to create drag and drop cards

I have incorporated the library available at: https://github.com/clauderic/react-sortable-hoc The desired effect that I am aiming for can be seen in this example: https://i.stack.imgur.com/WGQfT.jpg You can view a demo of my implementation here: https:// ...

javascriptreactjsreact-sortable-hoc

Determining the nature of dragged content in a Javascript dragenter event: distinguishing between text and files

When utilizing the dragenter event to display a dropzone for quickly uploading dropped files on the website, everything functions correctly. However, the dropzone also appears when dragging selected text. How can I differentiate between the two situation ...

javascriptfile-uploaddrag-and-dropdom-events

Confusion around Angular's $animate feature

I am struggling with understanding AngularJS $animate. I cannot figure out if my mistake is minor or a major misconception. Despite trying to simplify the code, it remains quite lengthy. Nonetheless, it should work without any issues. <!doctype htm ...

angularjsanimationng-animate

The FormattedNumber feature in react-intl is not functioning correctly

I am currently attempting to utilize the FormattedNumber component within the react-intl library, but I am encountering difficulties in getting it to function correctly. <IntlProvider locale="en-US" messages={locales['en-US']} > ...

javascriptreactjsreact-intl

Restricting the number of dots on a slick-slider without using jQuery

I am facing an issue where the dots in my slider keep adding up and forming multiple lines when there are more than 30-40 images. I aim to achieve a dot navigation similar to Instagram, where clicking on a dot displays the corresponding image with the acti ...

javascriptcssanimationjsxslick.js

What are the best practices for ensuring design responsiveness with the Bootstrap grid system across various screen resolutions?

<div class="row"> <div class="col-xl-4 col-md-12 col-sm-12 col-lg-4 data-one"> <one /> </div> <div class="col-xl-4 col-md-12 col-sm-12 col-lg-4 dashboard-two"> <two /> </div> <div ...

cssbootstrap-4media-queries

Issues with internal linking in TYPO3 are causing anchor tags to malfunction

When creating an internal anchor, it is usually defined using <a name="anchorname">Introduction</a>. To link to this anchor, you would write something like <a href="#anchorname">Top</a>. In TYPO3, an anchor is a ...

htmlhyperlinkanchortypo3

Display text when hovered over or clicked to insert into an HTML table

I have an HTML table connected with a component field gameArray and I need it to: Show 'H' when the user's cursor hovers over TD (:hover) and the corresponding field in gameArray is an empty string, Fill the gameArray field after a click. ...

javascripthtmlangulartypescriptangularjs-directive

Ways to trigger a Vue.js method after a delay of 500 milliseconds

Currently, I am developing a search system that triggers an ajax call with every key press. However, I would like to implement a delay of 500ms before the ajax call is made after typing begins. Any ideas on how this can be achieved? ...

javascriptvue.js

"DataTransfer object in IE 10 does not contain any information when using drag and drop

I am struggling with my drag and drop upload code in IE 10. The event handlers in my code are as follows: dragCatcher.on('drop', function (e) { e.preventDefault(); e.stopPropagation(); console.log(e.originalEvent.dataTransfer.files); }).on ...

javascriptjqueryhtmldrag-and-drop

The dynamic styles set by CSS/JavaScript are not being successfully implemented once the Ajax data is retrieved

I am currently coding in Zend Framework and facing an issue with the code provided below. Any suggestions for a solution would be appreciated. The following is my controller function that is being triggered via AJAX: public function fnshowinfoAction() { ...

javascriptjquerycssajaxzend-framework

Switch Button JavaScript Library

My project involves creating a mobile website with a simple interaction where clicking on a div opens another div underneath it. The HTML structure consists of two stacked divs, with the CSS for the bottom div initially set to 'none'. Using JavaS ...

javascriptcssbutton

Error in validating Javascript, Ajax, and PHP form entries

In order to ensure that only valid authors are added to my database on the bookshop website, I have implemented a form validation system. While the author check function works perfectly and alerts users when an author is found, there seems to be an issue w ...

phpjavascriptajaxformsvalidation

Utilizing a variable within an Angular filter: A step-by-step guide

Currently, I am in the process of experimenting with Angular. I am able to retrieve some data from the controller and successfully apply a filter when passing it as a string. However, I encounter issues when attempting to use a variable for the filter inst ...

javascriptangularjs

What is the best method to pass a JavaScript file array to a Node.js server?

Is it possible to transfer data from a Javascript file linked to an HTML page to a Node.js file on a post route without displaying it on the HTML page? If so, what is the best way to accomplish this? ...

javascripthtmlnode.js

verified firebase/firestore requests

I've been struggling with the process of sending authenticated firebase/firestore calls. I set up firestore in my web app using Next.js as shown below: import { initializeApp } from "firebase/app"; import { getFirestore } from 'firebase ...

javascriptfirebasegoogle-cloud-firestorenext.js

Adjusting the size of a button in HTML and CSS

Check out this code: /* custom button */ *, *:after, *:before { box-sizing: border-box; } .checkbox { position: relative; display: inline-block; } .checkbox:after, .checkbox:before { font-family: FontAwesome; font-feature-settings: normal; - ...

javascripthtmlcssanimation

I had a desire to convert my project to typescript, however, I encountered an issue within the App.tsx file that needs to be

I'm encountering ESLint errors in my App.js file, which is generated automatically during the compilation of my App.tsx. The App.tsx file includes a simple component. How can I resolve this issue? Here's an example of the error: [eslint] src/ ...

javascripttypescriptwebpackjsxeslint