Frozen Column and Rows for large scrollable table

Question

I have been painstakingly working on a solution to have a table's column headers scroll with the body when scrolling horizontally and have the first column scroll with the rows when scrolling vertically. I have found solutions that are very close but either use CoffeeScript and Pug or don't work if there is more than one table on the page. This fiddle example http://jsfiddle.net/software_christian/Fp9a3/8/ from How can I lock the first row and first column of a table when scrolling, possibly using JavaScript and CSS? is the intended behavior I am looking for but can't seem to get it working in fiddle, codepen.io or the environment I am developing in. Other solutions I have found that somewhat work seem over-engineered (accepted solution for Large dynamically sized html table with a fixed scroll row and fixed scroll column )

Furthermore, the current code I am using works when I put the page/tab on my monitor but not on my actual mac screen. Does anyone know what is going on here and could someone please help me out with a simple dynamic solution using either JQuery, JS, and/or CSS and HTML to solve this problem? I am also trying to maintain the standard HTML structure of a table:

Ideal HTML Format: (Ideally, I would like a table to remain standard (not scroll) unless I give it a unique class such as "scroll-table")

The below snippets are what I currently have so far.

 $(document).ready(function() { $('.scroll-table tbody').scroll(function(e) { //detect a scroll event on the tbody $(this).siblings('thead').css("left", -$(this).scrollLeft()); scrolling $(this).siblings().children().children().css("left", $(this).scrollLeft()); $(this).children().children().css("left", $(this).scrollLeft()); }); }); 

 .scroll-table { position: relative; background-color: #aaa; overflow: hidden; border-collapse: collapse; } .scroll-table thead { position: relative; display: block; width: auto; overflow: visible; } .scroll-table thead th { background-color: #99a; min-width: 154px; border: 1px solid #222; word-break: break-word; } .scroll-table thead th:nth-child(1) { position: relative; display: table-cell; background-color: #88b; min-width: 154px; max-width: 154px; } .scroll-table tbody { position: relative; display: block; width: auto; height: 239px; overflow: scroll; } .scroll-table tbody td { background-color: #bbc; min-width: 154px; border: 1px solid #222; } .scroll-table tbody tr td:nth-child(1) { position: relative; display: block; height: auto; background-color: #99a; min-width: 154px; max-width: 154px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <table class="scroll-table"> <thead> <tr> <th>Name</th> <th>Town</th> <th>County</th> <th>Age</th> <th>Profession</th> <th>Anual Income</th> <th>Matital Status</th> <th>Children</th> <th>Annual Income</th> <th>Marital Status</th> <th>Cranes</th> <th>Bends</th> </tr> </thead> <tbody> <tr> <td>John Smith</td> <td>Macelsfield</td> <td>Cheshire</td> <td>52</td> <td>Brewer</td> <td>£47,000</td> <td>Married</td> <td>2</td> <td>All</td> <td>Work</td> <td>and</td> <td>no</td> </tr> <tr> <td>Jenny Jones</td> <td>Threlkeld</td> <td>Cumbria</td> <td>34</td> <td>Shepherdess</td> <td>£28,000</td> <td>Single</td> <td>0</td> <td>play</td> <td>makes</td> <td>Jack</td> <td>a</td> </tr> <tr> <td>Peter Frampton</td> <td>Avebury</td> <td>Wiltshire</td> <td>57</td> <td>Musician</td> <td>£124,000</td> <td>Married</td> <td>4</td> <td>dull</td> <td>boy</td> <td>All&nbsp;</td> <td>work</td> </tr> <tr> <td>Simon King</td> <td>Malvern</td> <td>Worchestershire</td> <td>48</td> <td>Naturalist</td> <td>£65,000</td> <td>Married</td> <td>2</td> <td>and</td> <td>no</td> <td>play</td> <td>makes</td> </tr> <tr> <td>Lucy Diamond</td> <td>St Albans</td> <td>Hertfordshire</td> <td>67</td> <td>Pharmasist</td> <td>Retired</td> <td>Married</td> <td>3</td> <td>Jack</td> <td>a</td> <td>dull</td> <td>boy</td> </tr> <tr> <td>Austin Stevenson</td> <td>Edinburgh</td> <td>Lothian</td> <td>36</td> <td>Vigilante</td> <td>£86,000</td> <td>Single</td> <td>Unknown</td> <td>All&nbsp;</td> <td>work</td> <td>and</td> <td>no</td> </tr> <tr> <td>Wilma Rubble</td> <td>Bedford</td> <td>Bedfordshire</td> <td>43</td> <td>Housewife</td> <td>N/A</td> <td>Married</td> <td>1</td> <td>play</td> <td>makes</td> <td>Jack</td> <td>a</td> </tr> <tr> <td>Kat Dibble</td> <td>Manhattan</td> <td>New York</td> <td>55</td> <td>Policewoman</td> <td>$36,000</td> <td>Single</td> <td>1</td> <td>dull</td> <td>boy</td> <td>All</td> <td>work</td> </tr> <tr> <td>Henry Bolingbroke</td> <td>Bolingbroke</td> <td>Lincolnshire</td> <td>45</td> <td>Landowner</td> <td>Lots</td> <td>Married</td> <td>6</td> <td>and</td> <td>no</td> <td>play</td> <td>makes</td> </tr> <tr> <td>Alan Brisingamen</td> <td>Alderley</td> <td>Cheshire</td> <td>352</td> <td>Arcanist</td> <td>A pile of gems</td> <td>Single</td> <td>0</td> <td>Jack</td> <td>a</td> <td>dull</td> <td>boy</td> </tr> </tbody> </table> 

Note: Snippet doesn't seem to be working here. Seems like I can only replicate the behavior I'm seeing on my own machine & monitor :( Thank you much!

Answer 1

So I decided to start from scratch and finally was able to write something that works for multiple tables on a single page and only needs the application of a single class to the main table container to get desired results. Here is the code:

JS -

$(document).ready(function() {
        var wrapper = document.getElementsByClassName('scroll-table-1');

        for (var i = 0; i < wrapper.length; i++) {
            wrapper[i].addEventListener('scroll', function (e) {

                var table = this.closest('table');
                var headerRow = table.querySelector('thead');                        
                var firstCol = table.querySelectorAll('tbody tr td:first-child');
                var topLeftCorner = table.querySelector('thead th:first-child');

                headerRow.setAttribute('style','top:' + this.scrollTop + 'px');
                topLeftCorner.setAttribute('style','left:' + this.scrollLeft + 'px');

                firstCol.forEach((n) => {
                    n.setAttribute('style','left:' + this.scrollLeft + 'px');
                });
            });
        };
    });

CSS:

.scroll-table-1 {
      position: relative;
      display: block; 
      width: auto;
      height: 350px;
      overflow: scroll;
    }

    .scroll-table-1 thead {
      position: relative;
      display: block; 
      width: auto;
      overflow: visible;
    }

    .scroll-table-1 tbody td {
      background-color: #bbc;
      min-width: 154px;
      border: 1px solid #222;
      display: table-cell;
    }

    .scroll-table-1 tbody tr td:nth-child(1) {  
      position: relative;
      display: table-cell; 
      background-color: #99a;
      min-width: 154px;
      max-width: 154px;
      z-index: 10;
    }

    .scroll-table-1 thead th {
      background-color: #99a;
      min-width: 154px;
      border: 1px solid #222;
      word-break: break-word;
      z-index: 15;
    }

    .scroll-table-1 thead th:nth-child(1) {
      position: relative;
      display: table-cell; 
      background-color: #88b;
      min-width: 154px;
      max-width: 154px;
      z-index: 100;
    }

The strange thing is that it works perfectly smooth when I scroll on my monitor, but for some reason when I drag the window onto my mac screen the scrolling becomes a bit jittery/jumpy. I have no idea what is causing this nor do I believe it makes any sense but it works so I'll take it for now. If someone has an explanation as to why this bizarre display change behavior happens I would love to hear it.....