i'm using bootstrap off-canvas and i put a table in the canvas but the table isn't fit in the canvas body

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample"
            aria-labelledby="offcanvasExampleLabel" style="width: min-content;">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title text-center" id="offcanvasLabel">extra-infos</h5>
                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                    aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <div>
                    <table class="table table-striped status-table" style="max-width: 100vw; overflow-x: auto;">
                        <tr style="text-align: center;">
                            <th>status</th>
                            <th>info</th>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

i create table completly with js file

document.addEventListener('DOMContentLoaded', () => { 
    for (let i = 0; i < 22; i++) {
        const tr = document.createElement('tr')
        tr.innerHTML = `<td class="uppercase" id="other_status_title${i}"></td>
        <td id="other_status_body${i}"></td>`
        document.querySelector('.status-table').appendChild(tr);
    }
})

most of answers about mine like problems say use overflow-x: auto; but donesn't work...help