Html table with fixed columns

Question

I'm trying to make my first 3 columns of my table fixed so that they always show when scrolling horizontally. But they need to move when scrolling vertically

I made a excel table with what it needs to do :

I have tried http://jsfiddle.net/YMvk9/5294/

.headcol {
        position:absolute; 
        width:5em; 
        left:0;
        top:auto;
        border-right: 0px none black; 
        border-top-width:3px;
        margin-top:-3px;

with scrollTop of jquery of the right scrollbar so I move the top value of the yellow cells.

The current problem is that when I fill up the html table with the database the yellow cells are shown even tho my overflow is "scrolled" since they are absolute.

See next image :

Any way to fix this problem. So that they are hidden?

Or any other solution to what I have to do would be appreciated

Answer 1

You could use the JQUERY scroll function and move the column you want to "freeze" in the opposite way. You also need to set the z-index so the column stays on top of the others.

In your css:

.frezedCell
{
    z-index: 1000;
    position:relative;
}

In your page :

$(document).ready(function () {
    $(".divTableParts").scroll(function () {
         var divTable = $(".divTableParts");
        $(".frezedCell").css("left", 0 + divTable.scrollLeft());
    });
});

Answer 2

You could use datatables for it: https://datatables.net/extensions/fixedcolumns/

Basically you'd have datatables as it's dependency and use this piece of code:

$(document).ready( function () {
    var table = $('#example').DataTable( {
        "scrollY": "300px",
        "scrollX": "100%",
        "scrollCollapse": true,
        "paging": false
    } );
    new $.fn.dataTable.FixedColumns( table );
} );