How can I lock the first row and first column of a table when scrolling, possibly using JavaScript and CSS?

by

Oh well, I looked up for scrollable table with fixed column to understand the need of this specific requirement and your question was one of it with no close answers..

I answered this question Large dynamically sized html table with a fixed scroll row and fixed scroll column which inspired to showcase my work as a plugin https://github.com/meetselva/fixed-table-rows-cols

The plugin basically converts a well formatted HTML table to a scrollable table with fixed table header and columns.

The usage is as below,

$('#myTable').fxdHdrCol({
    fixedCols    : 3,       /* 3 fixed columns */
    width        : "100%",  /* set the width of the container (fixed or percentage)*/
    height       : 500      /* set the height of the container */
});

You can check the demo and documentation here

More Related Contents:

  1. Scroll Function working in reverse order [closed]
  2. How can I make a div stick to the top of the screen once it’s been scrolled to?
  3. Prevent BODY from scrolling when a modal is opened
  4. Keep overflow div scrolled to bottom unless user scrolls up
  5. How to make div fixed after you scroll to that div?
  6. Make scrollbar visible in mobile browsers
  7. Stop fixed position at footer
  8. Synchronized scrolling using jQuery?
  9. jQuery jump or scroll to certain position, div or target on the page from button onclick [duplicate]
  10. Reverse Scrolling
  11. How to window.scrollTo() with a smooth effect
  12. html: hover table column [duplicate]
  13. JS hide function error
  14. How to implement something like this GIF that using mouse drag and select items
  15. Javascript counting all the characters from a HTML document
  16. Load and execution sequence of a web page?
  17. How can I get the scrollbar position with JavaScript?
  18. JSFiddle code not working in my own page
  19. All About…. Z-Index?
  20. Get the device width in javascript
  21. Why my show hide button needs double-click on first time
  22. Infinity Loop Slider Concepts
  23. Where should I put the CSS and Javascript code in an HTML webpage?
  24. How to print HTML content on click of a button, but not the page? [duplicate]
  25. jQuery Validation using the class instead of the name value
  26. Access CSS file contents via JavaScript
  27. How to create checkbox inside dropdown?
  28. Preventing Child from firing parent’s click event
  29. Google’s Imageless Buttons
  30. How to apply background-color to a selected option?

Leave a Comment