Unwanted Horizontal scrollbar from Javascript DataTable#
I am using the Javascript DataTable component to provide a sortable HTML table experience in Front Mission and 4th Super Robot Wars gaming guides. However there was a long standing issue that the table shows horizontal scrollbar even when the content is not too wide.
I have tried a few solutions I found online, including setting scrollX to false, adding table-layout:fixed; width: 98% !important to the dataTables_no_scroll_x css class and apply it to the table, and adding overflow-x:hidden !important; overflow-y:auto !important;to the dataTables_scrollBody css class, to no avail.
As my tables are high, the scroll bar is not visible unless the user scrolls to the very bottom of the page. I let the bug stood for a while.
Recently I finally find the time to debug the issue in F12 developer tools. It looks like the scroll bar is not from the HTML <table> element but from the <div> element that wraps the <table> element, a container generated by the DataTable component. The row style added --bs-gutter-x: 1.5rem; to it. Adding div.dt-container>div.row{ --bs-gutter-x: 0 !important;} to the css class fixed the issue. As dt-container seems to be only used for the DataTable wrapper, I think there won’t be a conflict with other components or within DataTable itself. In theory I can also modify $.fn.dataTableExt.oStdClasses.sWrapper in javascript but that would be slower.