Creating HTML table with sticky headers and columns using only CSS - 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.

Answer 1

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);"><<</button>
<button title="Right" onmousedown="right();"
onmouseup="right(1);">>></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