Scroll HTML table horizontally and vertically while left column is fixed and header is fixed for vertical scrolling

Question

Scroll HTML table horizontal and vertical while left column is fixed

From the above thread I am able to scroll an HTML table horizontally and vertically while the left column is fixed but I want to fix the vertical scrolling of the header.

The HTML table that I'd like to have:

vertical scrolling
horizontal scrolling
fixed headers (that do not support vertical scrolling, but horizontal scrolling)
Fixed left column

I have used a Jquery DataTable which is working great but I also want to hide and show some of the columns. But this jQuery Datatable has a performance issue if we have too many rows and too many columns (which we want hide and show).

Can we solve this problem using HTML, CSS, jQuery and Javascript

Could any one please help me on this?

Anagha · Accepted Answer · 2019-04-19 10:10:00Z

0

you can you the below code

$(document).ready( function () { $('#myTable').DataTable( { fixedHeader: true } ); } );

And can download the related files from https://github.com/DataTables/FixedHeader

answered Apr 19, 2019 at 10:10

Anagha

1364 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Avinash Over a year ago

Thanks for the quick reply. As i mentioned in the thread, I don't want to use the jQuery Datatable because I also want to hide and show some of the columns but jQuery Datatable has a performance issue if we have too many rows and too many columns (which we want hide and show). Can we do solve this issue with out Datatable?

Collectives™ on Stack Overflow

Scroll HTML table horizontally and vertically while left column is fixed and header is fixed for vertical scrolling

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related