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 : enter image description here

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 : enter image description here

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

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

I ran once over the same matter and I ended up so overwhelming that I just decided to using 3 tables: 1 for the headers, 1 for the fixed columns and 1 for the scrollable columns, all of them wrapped on div's with different attributes. — , Nov 04 '14 at 18:43
I would rather keep it in one table since I take that table and send it to a function that take a table and export it to excel,word,pdf. — Ecnerwal, Nov 04 '14 at 18:48
Not sure if this is possible with your current HTML structure.. Have you thought about using a plugin? There are a lot of good data table type plugins out there for jQuery. For example, http://stackoverflow.com/questions/5622716/choosing-a-jquery-datagrid-plugin — khollenbeck, Nov 04 '14 at 18:52
That's the reason why I just commented instead of answering. Yet, you can compile the data before sending it to the function. I don't think there's a problem. You will doing it at some point if no one give you an answer. I hope that won't be the case. There are also a couple of plugins for doing that but I must confess I'm not a big fan of any of them: jquery.fixedHeaderTable and jscrollpane. — , Nov 04 '14 at 18:54
I know. But I had to say that I was still looking for answer. — Ecnerwal, Nov 04 '14 at 18:58

score 2 · Accepted Answer · answered Nov 04 '14 at 20:06

2

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());
    });
});

answered Nov 04 '14 at 20:06

Radek

36
2

Tried, it works like a charm in google chrome but IE is slow to refresh so it lags, but it does what I want it to do. Accepted :) – Ecnerwal Nov 04 '14 at 20:42

score 0 · Answer 2 · answered Nov 04 '14 at 19:55

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 );
} );

Html table with fixed columns

2 Answers2