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

Question

How can I create a table that has its first row and first column both locked, as in Excel, when you activate \'freeze panes\'? I need the table to both scroll horizontally

Answer 1

Here is one that I made that is pure javascript/css only.

https://jsfiddle.net/KirbyLWallace/x5sbe0dk/5/

It's meant to be used in full width screen, but I've modified to fit a specific width for the fiddle.

  

    

      
Column1
      
Column2
      
Column3
      
Column4
    
  

  

    
a
b
c
d
    
1
2
3
4
    
h
i
j
k
    
a
b
c
d
    
1
2
3
4
    
h
i
j
k
    
a
b
c
d
    
1
2
3
4
    
h
i
j
k
    
a
b
c
d
    
1
2
3
4
    
h
i
j
k
    
a
b
c
d
    
1
2
3
4
    
h
i
j
k
    
a
b
c
d
    
1
2
3
4
    
h
i
j
k
    
a
b
c
d
    
1
2
3
4
    
h
i
j
k
    
a
b
c
d
    
1
2
3
4
    
h
i
j
k
    
a
b
c
d
    
1
2
3
4
    
h
i
j
k
    
a
b
c
d
    
1
2
3
4
    
h
i
j
k
    
a
b
c
d
    
1
2
3
4
    
h
i
j
k
    
a
b
c
d
    
1
2
3
4
    
h
i
j
k
    
a
b
c
d
    
1
2
3
4
    
h
i
j
k
    
a
b
c
d
    
1
2
3
4
    
h
i
j
k
  

javascript:

(() => {
        scaleElements();  
    })();


  function scaleElements() {

        // element() is just shorthand for document.getElementById().

        // scaleElements() scales a number of other things, not included here, 
        // that get rescaled any time the browser, or a container is resized.
        // the table header row here is just one of them...
        //
        // this thing includes checks to see if a table with the table & thead 
        // is on the page.  If it is, it checks to see if the span container is
        // here (it's not on the first run, but it is on subsequent calls.  So, 
        // it adds it if it needs it, or reuses it if it's there.

        if (element("data-table")) {

            if (element("th-span-container")) {
                element("th-span-container").parentElement.removeChild(element("th-span-container"));
            }

            var x = document.createElement("div");
                x.id = "th-span-container";
                x.style.cssFloat = "left";
                x.style.position = "fixed";
                x.style.top = "10px";

                // you will want to fiddle with your own particular positioning. 
                // this one is positioned to work on a table that is below a page 
                // logo banner.

            var tds = element("th-header-row").getElementsByTagName("td");

            for (i = 0; i < tds.length; i++) {

                let z = tds[i];
                let y = document.createElement("span");

                y.style.padding = "0px";
                y.style.margin = "0px";
                y.style.fontFamily = "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif";
                y.style.fontSize = "13px";
                y.style.border = "0px";
                y.style.position = "absolute";
                y.style.color = "white";
                y.style.backgroundColor = "#3D6588";
                y.style.left = z.offsetLeft + "px";
                y.style.height = z.offsetHeight + "px";
                y.style.lineHeight = z.offsetHeight + "px";
                y.style.width = z.offsetWidth + "px";
                y.innerHTML = z.innerHTML;
                x.appendChild(y);

            }

            element("table-container-div").appendChild(x);
            element("th-header-row").style.visibility = "hidden";

        }

    }

function element(e) {
    return document.getElementById(e);
}

css:

body {
  background: black;
}

#table-container-div {
            width: 310px;
            position: absolute;
            top: 10px;
            bottom: 10px;
            overflow-x: hidden;
            overflow-y: auto;
            min-width: 320px;
        }

        table {
            font-size: 13px;
            height: 120px;
            width: 300px;
            border: 0px solid red;
            background-color: #11171F;
        }

        tr {
            height: 22px;
            color: #cff3ff;
        }

            tr:hover {
                background-color: dimgrey;
            }

        td {
          color:white;
            border-right: 1px dotted #4F4F4F;
        }

        #th-header-row {
            background-color: #3D6588;
            color: white;
        }