'How to show horizontal scroll when table column resize using CSS and JavaScript

I resize the table columns it don't show the scroll. I don't want to limit the width of columns.

table should be width 100%, when resize the column horizontal scroll should be there.

Resizing is working perfect in Below code. only I need scroll when increase the column width.
Scroll should be hide when decrease the width.

I want same behaviour as ag-grid have(https://plnkr.co/edit/ysULLCfl4UCPmaGm) but I don't want to use plugin

document.addEventListener('DOMContentLoaded', function () {
                const createResizableTable = function (table) {
                    const cols = table.querySelectorAll('th');
                    [].forEach.call(cols, function (col) {
                        // Add a resizer element to the column
                        const resizer = document.createElement('div');
                        resizer.classList.add('resizer');

                        // Set the height
                        resizer.style.height = `${table.offsetHeight}px`;

                        col.appendChild(resizer);

                        createResizableColumn(col, resizer);
                    });
                };

                const createResizableColumn = function (col, resizer) {
                    let x = 0;
                    let w = 0;

                    const mouseDownHandler = function (e) {
                        x = e.clientX;

                        const styles = window.getComputedStyle(col);
                        w = parseInt(styles.width, 10);

                        document.addEventListener('mousemove', mouseMoveHandler);
                        document.addEventListener('mouseup', mouseUpHandler);

                        resizer.classList.add('resizing');
                    };

                    const mouseMoveHandler = function (e) {
                        const dx = e.clientX - x;
                        col.style.width = `${w + dx}px`;
                    };

                    const mouseUpHandler = function () {
                        resizer.classList.remove('resizing');
                        document.removeEventListener('mousemove', mouseMoveHandler);
                        document.removeEventListener('mouseup', mouseUpHandler);
                    };

                    resizer.addEventListener('mousedown', mouseDownHandler);
                };

                createResizableTable(document.getElementById('resizeMe'));
            });

.table {
                border-collapse: collapse;
            }
            .table,
            .table th,
            .table td {
                border: 1px solid #ccc;
            }
            .table th,
            .table td {
                padding: 0.5rem;
            }
            .table th {
                position: relative;
            }
            .resizer {
                position: absolute;
                top: 0;
                right: 0;
                width: 5px;
                cursor: col-resize;
                user-select: none;
            }
            .resizer:hover,
            .resizing {
                border-right: 2px solid blue;
            }

            .resizable {
                border: 1px solid gray;
                height: 100px;
                width: 100px;
                position: relative;
            }

    <body>
        <table id="resizeMe" class="table">
            <thead>
                <tr>
                    <th>No.</th>
                    <th>First name</th>
                    <th>Last name</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Andrea</td>
                    <td>Ross</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Penelope</td>
                    <td>Mills</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Sarah</td>
                    <td>Grant</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Vanessa</td>
                    <td>Roberts</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>Oliver</td>
                    <td>Alsop</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>Jennifer</td>
                    <td>Forsyth</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>Michelle</td>
                    <td>King</td>
                </tr>
                <tr>
                    <td>8</td>
                    <td>Steven</td>
                    <td>Kelly</td>
                </tr>
                <tr>
                    <td>9</td>
                    <td>Julian</td>
                    <td>Ferguson</td>
                </tr>
                <tr>
                    <td>10</td>
                    <td>Chloe</td>
                    <td>Ince</td>
                </tr>
            </tbody>
        </table>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to show horizontal scroll when table column resize using CSS and JavaScript

Sources

Related Questions