Creating HTML table with sticky headers and columns using only CSS

Question

I have a table in which I'm trying to make the header, and an arbitrary number of columns on its left "sticky". Sticky as in, as the table data is vertically scrolled, the headers stay stuck to the top. And if there's enough columns to scroll vertically, the data and headers are vertically scrollable, but some columns stick.

Here's a table that's vertically and horizontally scrollable with sticky headers.

http://jsfiddle.net/7b29Lkwy/5/

The important parts being

.sticky-table {
    width: 100%;
    height: 100%;
    overflow-x: scroll;
}
.scroll {
    float: left; /* Makes with total content width */
    min-width: 100%; /* In case there isn't enough columns */
    height: calc(100% - 35px); /* Assuming we know head height */
    overflow: scroll;
}

But I'm not sure how I can do this while including a sticky column.

Put the headers in a separate div that doesn't scroll with the rest of it. — durbnpoisn, Nov 10 '15 at 19:29

cweitat · Answer 1 · 2015-11-13T01:35:12.047

You need some js to make it work.

The scrollbars:

<button title="Up" onmousedown="upp();" onmouseup="upp(1);">Up</button>
<button title="Left" onmousedown="left();" 
        onmouseup="left(1);">&lt;&lt;</button>
<button title="Right" onmousedown="right();" 
        onmouseup="right(1);">&gt;&gt;</button>
<button title="Down" onmousedown="down();" onmouseup="down(1);">Dn</button>

Replace t1 with your table ID

if(!myTable){myTable=document.getElementById("t1");

And of course the working js

var myRow=1;
  var myCol=1;
  var myTable;
  var noRows;
  var myCells,ID;

function setUp(){
    if(!myTable){myTable=document.getElementById("t1");}
     myCells = myTable.rows[0].cells.length;
    noRows=myTable.rows.length;

    for( var x = 0; x < myTable.rows[0].cells.length; x++ ) {
        colWdth=myTable.rows[0].cells[x].offsetWidth;
        myTable.rows[0].cells[x].setAttribute("width",colWdth-4);

    } 
}

function right(up){
    if(up){window.clearTimeout(ID);return;}
    if(!myTable){setUp();}

    if(myCol<(myCells)){
        for( var x = 0; x < noRows; x++ ) {
            myTable.rows[x].cells[myCol].style.display="";
        }
        if(myCol >1){myCol--;}

        ID = window.setTimeout('right()',100);
    }
}

function left(up){
    if(up){window.clearTimeout(ID);return;}
    if(!myTable){setUp();}

    if(myCol<(myCells-1)){
        for( var x = 0; x < noRows; x++ ) {
            myTable.rows[x].cells[myCol].style.display="none";
        }
        myCol++
        ID = window.setTimeout('left()',100);

    }
}

function down(up){
    if(up){window.clearTimeout(ID);return;}
    if(!myTable){setUp();}

    if(myRow<(noRows-1)){
            myTable.rows[myRow].style.display="none";
            myRow++    ;

            ID = window.setTimeout('down()',100);
    }    
}

function upp(up){
    if(up){window.clearTimeout(ID);return;}
    if(!myTable){setUp();}

    if(myRow<=noRows){
        myTable.rows[myRow].style.display="";
        if(myRow >1){myRow--;}
        ID = window.setTimeout('upp()',100);
    }    
}

Refer here for the detailed explanation http://www.codeproject.com/Articles/20017/Freeze-Panes-like-Excel

Update: Solution to problem is to use this jquery table plugin -> jtable

This [another SO](http://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body) ? — cweitat, Nov 12 '15 at 01:12
That has a fixed column but no header. I'm looking to do both. It seems I can only find solutions for one but not both. — fent, Nov 12 '15 at 04:21
[jtable](http://meetselva.github.io/fixed-table-rows-cols/) Jquery table plugin? — cweitat, Nov 12 '15 at 05:16
That might work. Although I notice some errors on their examples. I'll follow development for it, thanks! — fent, Nov 12 '15 at 08:43
No problem :) i just mod the answer so other people can also see. — cweitat, Nov 13 '15 at 01:35

Creating HTML table with sticky headers and columns using only CSS

1 Answers1