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