Multiple Horizontal Scroll on Datatables

Question

As far as I know, Datatables (or any other table), cannot have two horizontal scrolls. I have added Fixed Columns from Datatables and fixed up to 6 columns out of 20 or so. The first 6 columns have taken almost 70% of the table view, so on the remaining 30%, other data cannot be seen properly.

Is there any way I can add another Horizontal Scroll on the Fixed Columns (I know this beats the purpose of fixing the columns)?? This second scrollbar should scroll the Fixed Columns only.

Answer 1

I had this issue where I could not have scrollX set to true, but my column headers were wider than my table. This is to sync scroll bar with the body. Just set overflow: scroll if you want to see the scroll bar

  var footer = document.getElementsByClassName('dataTables_scrollBody')[0]
  var header = document.getElementsByClassName('dataTables_scrollHead')[0]

  header.style.overflow = 'hidden'

  footer.onscroll =  function(e){
    header.scrollLeft = this.scrollLeft;
  }