Skip to main content

Table Side Scroll

Allow tables to scroll horizontally if they are super wide

Put this on the page 

<script>
document.addEventListener('DOMContentLoaded', function() {
    // CSS to ensure scrollbar is always visible
    var css = `div.table-wrapper::-webkit-scrollbar { width: 8px; height: 8px; }
               div.table-wrapper::-webkit-scrollbar-thumb { background-color: darkgrey; border-radius: 10px; }`;
    var head = document.head || document.getElementsByTagName('head')[0];
    var style = document.createElement('style');
    head.appendChild(style);
    style.type = 'text/css';
    if (style.styleSheet){
        // This is required for IE8 and below.
        style.styleSheet.cssText = css;
    } else {
        style.appendChild(document.createTextNode(css));
    }

    var tables = document.querySelectorAll('.table.table-bordered.table-striped');
    tables.forEach(function(table) {
        var wrapper = document.createElement('div');
        wrapper.className = 'table-wrapper'; // Adding a class for targeting by CSS
        wrapper.style.overflowX = 'scroll';  // This forces the horizontal scrollbar to be visible
        table.parentNode.insertBefore(wrapper, table);
        wrapper.appendChild(table);
    });
});
</script>