Jomon Antony Jomon Antony - 2 months ago 12
CSS Question

Vertical and horizontal scroll in Html table

I have a table as shown in image.
I need to add Vertical and horizontal scrolls. While scrolling vertically The top row should be fixed and all other rows should scroll. But while scrolling horizontally, the left column should be fixed and top row will move horizontally.
In other words, The top row will move horizontally only and left column vertically only.
How can I fix this?
enter image description here

Answer

I found a solution. We can use js plugin. sortable_table.js, fixed_table_rc.js

$('#fixed_hdr2').fxdHdrCol({
    fixedCols:  1,
    width:     "100%",
    height:    500,
    colModal: [
           { width: 50, align: 'left' },
           { width: 110, align: 'left' },
           { width: 170, align: 'left' },
           { width: 250, align: 'left' },
           { width: 100, align: 'left' },
           { width: 70, align: 'left' },
           { width: 100, align: 'left' },
           { width: 100, align: 'left' },
           { width: 90, align: 'left' },
           { width: 400, align: 'left' }
    ],
    sort: true
});