DataTables: When scroll bar of tbody is hidden, fixed column gets messed up

Question

I've got a table which includes:

1. first Column is fixed
2. tfoot
3. horizontal scroll bar of tfoot
4. have hidden horizontal scroll bar of tbody.

Fiddle: https://jsfiddle.net/jbeteta/6sxh3gbk/12/

    $(function() {
              $('#example').DataTable({         
            "fnInitComplete": function () {
                        // Disable scrolling in Head
                        $('.dataTables_scrollHead').css({
                            'overflow-y': 'hidden !important'
                        });

                        // Disable TBODY scroll bars
                        $('.dataTables_scrollBody').css({
                            'overflow-y': 'scroll',
                            'overflow-x': 'hidden',
                            'border': 'none'
                        });

                        // Enable TFOOT scoll bars
                        $('.dataTables_scrollFoot').css('overflow', 'auto');

                        //  Sync TFOOT scrolling with TBODY
                        $('.dataTables_scrollFoot').on('scroll', function () {
                            $('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
                        });

                    },
                scrollX: true,
                paging: true,
                fixedColumns: {
                  leftColumns: 1
                }
 });
        });

In that scenario, when you scroll to the right side, you will see that last row cell of fixed Column (background color: red) get messed up, because horizontal <tbody> scroll bar is hidden.

My question: Is there any way to correct this?

By the way: I had to hide <tbody> horizontal scroll bar because it doesn't get syncronized with <tfoot> scroll bar.

Many thanks

EDIT: In Chrome is the same:

Answer 1

Here is a partly solution. The entire setup is a huge mix of different tables and divs. For some reason the hidden scrollbars still is in "effect" for several of the divs, i.e they still take up space and react when other elements is being scrolled. Perhaps really, really careful try and error CSS-ing on each element / container could solve the overall problem, but to me it seems like expected browser behaviour, simply "as it is". But on webkit-browsers you can do this :

div:not(.dataTables_scrollFoot)::-webkit-scrollbar { 
  display: none; 
}

https://jsfiddle.net/6sxh3gbk/19/

This will effectively disable all the nasty hidden (but not really hidden) scrollbars on the injected <div> elements, but preserve them on the footer element which we want to scroll with.

But this does only apply to webkit browsers: Chrome, chromium, Safari, Opera and Android.

Gecko (mozilla) once had a similar feature -moz-scrollbars-none but it was deprecated and left out. AFAIK there is a permanent cry for bringing it back.

This is also the case for Edge, the issue is still being raised. For Edge there is real hope, since MS many times have stated that EdgeHTML is meant to be fully compatible with the WebKit layout engine.

So a partly solution, covering perhaps 85%, all devices included.

Answer 2

Please check..

1. first Column is fixed
2. tfoot
3. horizontal scroll bar of tfoot
4. have hidden horizontal scroll bar of tbody.

this problem has been solved. Your ans is given below link..

$(function() {
      $('#example').DataTable({         
     scrollY:        "300px",
    scrollX:        true,
    scrollCollapse: true,
    paging:         false,
    fixedColumns:   {
        leftColumns: 1
    }
      });
    });

Fiddle