JSFiddle - React, Tailwind, and code Playground

HTML

<div class="controls">
        <div class="slider-container">
            <label for="width-slider">Container Width:</label>
            <input 
                type="range" 
                id="width-slider" 
                class="slider"
                min="30" 
                max="100" 
                value="100"
                step="1"
            >
        </div>
    </div>

    <div class="outer-wrapper" style="width: 100%;">
        <div class="table-wrapper">
            <table class="regular-table">
                <thead>
                    <tr>
                        <th>Column 1</th>
                        <th>Column 2</th>
                        <th>Column 3</th>
                        <th>Column 4</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td data-label="Column 1">Row 1, Col 1</td>
                        <td data-label="Column 2">Row 1, Col 2</td>
                        <td data-label="Column 3">Row 1, Col 3</td>
                        <td data-label="Column 4">Row 1, Col 4</td>
                    </tr>
                    <tr>
                        <td data-label="Column 1">Row 2, Col 1</td>
                        <td data-label="Column 2">Row 2, Col 2</td>
                        <td data-label="Column 3">Row 2, Col 3</td>
                        <td data-label="Column 4">Row 2, Col 4</td>
                    </tr>
                    <tr>
                        <td data-label="Column 1">Row 3, Col 1</td>
                        <td data-label="Column 2">Row 3, Col 2</td>
                        <td data-label="Column 3">Row 3, Col 3</td>
                        <td data-label="Column 4">Row 3, Col 4</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

CSS

body {
            padding: 2rem;
            font-family: Arial, sans-serif;
            max-width: 1400px;
            margin: 0 auto;
        }

        .controls {
            margin-bottom: 2rem;
        }

        .slider-container {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .slider {
            flex-grow: 1;
        }

        .width-display {
            min-width: 4rem;
            font-family: monospace;
        }

        .outer-wrapper {
            border: 2px dashed #ccc;
            padding: 1rem;
            transition: width 0.3s ease;
            margin: 0 auto;
        }

        .table-wrapper {
            container-type: inline-size;
            container-name: table-container;
            width: 100%;
        }

        .regular-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 1rem;
        }

        .regular-table th,
        .regular-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        .regular-table th {
            background-color: #f2f2f2;
        }

        @container table-container (max-width: 768px) {
            .regular-table td {
                display: block;
                width: 100%;
                box-sizing: border-box;
                position: relative;
                padding-left: 120px;
                margin-bottom: -1px;
            }

            .regular-table thead {
                display: none;
            }

            .regular-table tr {
                display: block;
                border: 1px solid #ddd;
                margin-bottom: 1rem;
            }

            .regular-table td::before {
                content: attr(data-label);
                position: absolute;
                left: 8px;
                width: 100px;
                font-weight: bold;
                top: 50%;
 ...

JavaScript

const slider = document.getElementById('width-slider');
        const outerWrapper = document.querySelector('.outer-wrapper');

        slider.addEventListener('input', (e) => {
            const percentage = e.target.value;
            outerWrapper.style.width = `${percentage}%`;
        });