estoy usando Bootstrap fuera del lienzo y puse una mesa en el lienzo, pero la mesa no encaja en el cuerpo del lienzo

 <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>

creo una tabla completamente con el archivo js

 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); } })

la mayoría de las respuestas sobre problemas míos dicen use overflow-x: auto; pero no funciona...ayuda