My datatable is giving me trouble when I resize the browser window to a certain width (around 700 pixels or less). The down arrow on the scrollbar disappears off the screen, which shouldn't happen. However, if I increase the width of the window, everything looks fine. I have tried the following solutions:
$("#table-tab").find('.dataTables_scrollHead').css('overflow-x', 'hidden');
$("#table-tab").find('.dataTables_scroll').css('overflow-x', 'auto');
$("#table-tab").find('.dataTables_scrollBody').css('overflow-x', 'auto');
Unfortunately, none of these fixes seem to work. It's perplexing why the datatable behaves perfectly with a wider screen but not with a smaller one. Any suggestions?