1

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?

ProgrammerPer
  • 1,125
  • 1
  • 11
  • 26
Avinash
  • 2,053
  • 2
  • 14
  • 32

1 Answers1

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

Anagha
  • 136
  • 3
  • 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? – Avinash Apr 19 '19 at 17:45