Responsive Tables: quick solution to make a table horizontally scrollable

responsive-tables

/*
    responsiveTables.js
    add a wrapper around every table in DOM
    and style make it horizontally scrollable (css below)
*/
function responsiveTables() {
    const tablesEls = document.querySelectorAll('table');
    for (const item of Array.from(tablesEls)) {
        const tableWrapperEl = document.createElement('div');
        tableWrapperEl.classList.add('c-responsive-table-wrapper');
        item.parentNode.insertBefore(tableWrapperEl, item);
        tableWrapperEl.appendChild(item);
    }
}



/*
    _responsive-table-wrapper.scss
*/
.c-responsive-table-wrapper {
    overflow-x: scroll;
}