Datasheets: when the scroll bar is hidden, the fixed column is messed up

Question

I have a table that includes:

• The first column is fixed.
• TFOOT
• tfoot horizontal scrollbar
• have a hidden horizontal scroll bar of the body.

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 this case, when you go to the right side, you will see that the cell of the last row of the fixed column (background color: red) is messed up because the horizontal <tbody> scroll <tbody> is hidden.

My question is: is there a way to fix this?

By the way, I had to hide the horizontal <tbody> because it does not synchronize with the <tfoot> .

Thank you very much

EDIT: The same thing in Chrome:

Answer 1

Here is a partial solution. The whole setup is a huge combination of different tables and divs. For some reason, hidden scrollbars are still in effect for several of the divs, i.e. They still occupy space and react when other elements scroll. Perhaps, a really thorough attempt and CSS-ing error for each element / container may solve the general problem, but for me it seems to be the expected behavior of the browser, just “as is”. But in 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 very hidden) scrollbars on the nested <div> elements, but save them in the footer element we want to scroll through.

But this only applies to web browsers : Chrome, Chrome, Safari, Opera and Android.

Gecko (mozilla) once had a similar function -moz-scrollbars-none , but it was deprecated and not taken into account. AFAIK there is a constant call to return it.

This also applies to Edge, the problem is still being raised . There is real hope for Edge, as MS has repeatedly stated that EdgeHTML is designed to be fully compatible with the WebKit linking engine.

Thus, in part, a solution spanning perhaps 85% includes all devices.

Answer 2

Please check..

• The first column is fixed.
• TFOOT
• tfoot horizontal scrollbar
• have a hidden horizontal scroll bar of the body.

this problem is resolved. Your ans is listed below links.

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

Fiddle